web前端清除浮动详解

清除浮动原因:  

1.浮动的盒子脱标, 会造成没有主动设置高度的父盒子, 失去高度

2.浮动的元素对其他元素有影响, 这种影响会让两者相互贴靠,这种影响有的时候会让页面布局混乱

清除浮动的方式一:

主动给父盒子添加高度, 这是因为没有高度的父盒子, 是关不住浮动的儿子对其他元素的影响

注：但是, 考虑到代码的字节量, 我们基本上不用主动设置父盒子高度

 

清除方式二:

clear: both; 使用该属性就可以清楚浮动带来的影响

Clear:both 这个属性写在被影响的父盒子里, 

注：但是有个bug, margin-top失效

 

清除方式三: 隔墙法(很重要!)

1.外墙法

通过增加一个div  并且给这个div添加clear:both; 属性, 代码示例如下:

并且能够给这个强添加高度, 去隔开上下两个模块, 但是有bug, 老ie只能解析高度最小为12的盒子, 可以通过设置_font-size:1px;

在两个浮动的盒子中间加一个如下的盒子：

 注：推荐使用

2.内墙法

代码示例如下: 

就是把墙移到了父盒子里

本质上, 是让父盒子有高度, 就可以管住儿子的浮动给其他元素带来的影响

 

清除浮动方式四:   overflow:hidden

Overflow:hidden  本意是溢出隐藏, 但是我们在使用的过程中, 发现, 如果给一个盒子添加overflow:hidden属性 那么 这个盒子从此有了高度! 就可以管住儿子的浮动给其他元素带来的影响

 //直接在box1中添加 overflow:hidden 属性

注：缺点是如果盒子本身定义了宽高，自身内容超过界限也会被隐藏;

并且 overflow:hidden 还可以做自适应高度的网页, 具体代码参考：

//h1和p在box盒子中随着内容的增加，边框不断被撑大

 

清除浮动方式五:

.ul1:after{
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}

直接在父盒子后面添加after;

清除浮动六：

注：给上一级添加
.clearfix::after,
.clearfix::before{
content: " ";
display: table;
}
.clearfix::after{
clear: both;
}