当前位置:首页 > 技术文章 > 正文内容

关于浮动清除的一些小感悟,4种方法清除浮动

zonemu3周前 (09-29)技术文章22

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流。

1.浮动。 2.绝对定位。 3.固定定位。

一、 什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。

二、浮动的的元素有4点特性:

1.浮动元素会脱离标准文档流,已经不区分快和行了。

2.浮动的元素会互相贴靠。

3.浮动的元素有“字围”的效果。

4.收缩。一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度。

三、清除浮动的方法。

1.给浮动的元素的祖先元素加高度(父元素或祖元素)。只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的元素了,也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。所以也就清除了浮动带来的影响。浮动的元素,只能被有高度的盒子关住。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。(不建议使用)

.

2.clear:both;清除掉两边的浮动。但是有一个非常致命的问题,margin失效了,上下之间没有了间距。

3.隔墙法。就是在两个部分之间加一个<div>,设置一个高度。还有就是“内墙发”:就是在块里边在放一个<div>,设置高度,不仅不让后边的去追前边的,并且能给外边的<div>撑出一个高度。

注:脱标的元素是不能把父元素撑出高度滴。

外墙法:

内墙法:

4.overflow:hidden; 一个父元素不能被自己浮动的儿子撑出高度。但是,只要给父亲加上 overflow:hidden;那么父元素就能被儿子撑出高度了。 最最最重要的是,使用overflow:hidden;能使margin生效!你没有看错,就是酱。

关于浮动的问题就酱啦,有什么不对的地方希望大家给给建议。

相关文章

程序员项目经理如何调动组员积极性

#这个方法应该很适合程序员都说程序员是比较傲娇,有点小自负(有的是相当,那不叫自负,那是实力的体现好吗),略微呆萌,自尊心偏小强的一类族群。是吗?中招了吗?作为管理好几个组员,要完成一个大项目的项目经...

解决GitLab报错:not allowed to force push code to a protected branch

当 force push 代码的时候,可能会遇到如下错误:You are not allowed to force push code to a protected branch on this pr...

高效使用 Vim 编辑器的 10 个技巧

在 Reverb,我们使用 MacVim 来标准化开发环境,使配对更容易,并提高效率。当我开始使用 Reverb 时,我以前从未使用过 Vim。我花了几个星期才开始感到舒服,但如果没有这样的提示,可能...

2个将HTML5打包成app的方法(h5打包成android)

越来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数。那么,有什么办法,既可以使用H...

育知HTML5培训,为什么要学习“HTML5混合式开发技术”

HTML5 的广泛应用,强势崛起企业现在安卓、iOS开发人员都在学习HTML5混合开发,节约成本、一专多能是未来很多企业用人趋势!HTML5工程师在今后的工作中与 Android、iOS工程师对接的几...

Web开发的十佳HTML5响应式框架(h5响应式模板)

HTML5框架是一类有助于快速轻松创建响应式网站的程序包。这些HTML5框架有着能减轻编程任务和重复代码负担的神奇功能。关于HTML5的框架种类繁多,并且很瘦欢迎,因为它能允许开发人员花费更少的时间和...