清除浮动的影响的方法

来源:互联网 发布:sas数据分析大赛题目 编辑:程序博客网 时间:2024/05/17 15:37

3 1.给父盒子加上高度(项目中不常用)

因为我们的元素基本上是由内容撑起高度。不会给固定高度


2.给后面的父盒子加上clear:both

(浮动清除,但是父盒子的margin失效了:父盒子塌陷了)会引起父盒子的margin失效,不推荐使用。


3.外墙法(在浮动的两个父盒子之间加上一个div,这个div样式为clear:both)

这时候,浮动清除了,margin也出现了。但是父盒子还是没有高度


4.内墙法(在浮动的父盒子最前面或最后面加上一个div,这个div的样式为clear:both)

父盒子有了高度,但是页面中出现了很多无用的div

5.overflow:hidden(给第一个浮动的父盒子加上这个属性。也能清除浮动,本意是溢出的部分隐藏起来)

这种方法,既可以清除浮动,也让盒子有了高度,还不会出现莫名其妙的空盒子。所以,推荐使用

原创粉丝点击