清除浮动方法
所谓浮动,就是指盒子脱离标准流。
浮动的性质:脱标、贴边、字围、收缩。
清除方法1
加高法(不推荐)
浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。
1 <div> → 设置height
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6
7 <div> → 设置height
8 <p></p>
9 <p></p>
10 <p></p>
11 </div>
法2:clear both
clear both 清除浮动,清除左右浮动影响(不推荐使用)
最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。
缺点:浮动确实被清除了,不会互相影响了。但是有一个问题,就是添加clear:both的盒子margin失效。*两个div之间,没有任何的间隙了。
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6
7 <div> → clear:both;
8 <p></p>
9 <p></p>
10 <p></p>
11 </div>
内墙法
在最后一个浮动标签后面新加一个标签,样式clear both
内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了
缺点:添加无意义标签,语义化差
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
// 墙
5 <div class="cl h10"></div>
6 </div>
7
8 <div>
9 <p></p>
10 <p></p>
11 <p></p>
12 </div>
外墙法
在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。
墙用自己的身体当做了间隙。
缺点:添加无意义标签,语义化差,父亲没有高度
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6 // 墙
7 <div class="cl h10"></div>
8
9 <div>
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>
法3:触发BFC
BFC(块级格式化上下文)
- 计算BFC的高度时,会检测浮动或者定位的盒子高度。
- BFC区域内的盒子不管怎么花里胡哨,都不会影响外面的盒子
哪些元素会具有BFC的条件
不是所有的元素模式都能产生BFC,w3c 规范:
display 属性为 block, list-item, table 的元素,才会产生BFC.
怎么样才能触发BFC?
display属性为inline-block,table-cell, table-caption, flex, inline-flex
float属性不为none
position定位为:absolute,fixed
overflow属性不为vsible
常用的是:overflow:hidden ,定位position
父亲加overflow,触发bfc,缺点是内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素.
1 <div> → 设置overflow:hidden
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
9 <div> → 设置overflow:hidden
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>
法4:伪元素清除
1.使用after伪元素清除浮动(推荐使用)
.clearfix::after {
content: ".";
display: block;//使生成的元素以块级元素显示,占满剩余空间
clear: both;//清除左右浮动
height: 0;// 高度为零,避免影响原来布局
visibility: hidden;// 内容不可见,但是保留位置
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
1 <div class="clearfix"> → 添加清除浮动类
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
9 <div class="clearfix"> → 添加清除浮动类
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>
2.使用before和after双伪元素清除浮动(推荐,我比较喜欢用这个)
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix{
*zoom: 1;
}
1 <div class="clearfix"> → 添加清除浮动类
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
9 <div class="clearfix"> → 添加清除浮动类
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>