清除浮动随堂小结

浮动的清除方式

浮动产生的副作用

1. 背景不能显示

由于浮动产生，如果对父级设置了css背景颜色或css背景图片，而父级不能被撑开，所以导致css背景不能显示。

2. 边框不能撑开

如果父级设置了css边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3. margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

css解决浮动，清除浮动方法

1. 对父级设置适合css高度

对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。盒子在网页中所占的高度为 height + padding2 + border2.

• Html


• Css


• JavaScript


• Vue.js

• 测试文字


• 测试文字


• 测试文字


• 测试文字

显示结果为:

2. clear:both 清除浮动

将上诉代码的style代码更改为：

结果与上图一样，但是我们会发现类.box2的外边距1000px并没有在网页中显示出来，所以采用第二种方式会导致margin外边距失效.

3. 父级div定义overflow：hidden

对父级css选择器加overflow：hidden样式，可以清除父级内使用float产生浮动。优点是可以使用很少css代码就可解决浮动产生。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore totam est culpa non sapiente tempora consequuntur, ea alias nisi eos. Eum, neque consectetur totam tenetur ex pariatur magnam omnis at!

结果显示为：

4. 隔墙法

在两部分浮动元素之间，建一个墙，隔开两部分浮动（注意是在两个包含浮动元素的盒子中间）。墙要加clear：both属性。用墙自己本身的高度作为两个盒子之间的间隙。内墙法：将墙放在浮动元素所在的盒子里。与外墙法不同的是，内墙法使得盒子被撑起了高度。

• qqqqqqq


• aaaaaaa

• qqqqqqq


• aaaaaaa

外墙法与内墙法结果显示一样：