清除浮动常用的三种方法
1、什么是浮动
浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素
2、浮动会带来什么负面效果
a)会造成父元素塌陷,如果父元素有背景色,则不会显示
b)会使紧随其后的行内元素围绕排列
c)会使紧随其后的块状元素被覆盖
所以,只要有浮动产生,我们就必须清除浮动
3、清除浮动常用的三种方法
(1)添加一个空标签,这也是初学者最常用的方式
<div style='clear:both;'></div>
我们在父级标签结束之前加入此div引入clear:both;样式,这种清除浮动的方式优点是通俗易懂,适合初学者,缺点是会给页面添加很多无意义的空标签,影响代码的结构和语义化
(2)给父元素添加overflow:hidden样式(不推荐使用)
(3)使用伪元素:after
推荐使用第三种方法清除浮动
浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素
2、浮动会带来什么负面效果
a)会造成父元素塌陷,如果父元素有背景色,则不会显示
b)会使紧随其后的行内元素围绕排列
c)会使紧随其后的块状元素被覆盖
所以,只要有浮动产生,我们就必须清除浮动
3、清除浮动常用的三种方法
(1)添加一个空标签,这也是初学者最常用的方式
<div style='clear:both;'></div>
我们在父级标签结束之前加入此div引入clear:both;样式,这种清除浮动的方式优点是通俗易懂,适合初学者,缺点是会给页面添加很多无意义的空标签,影响代码的结构和语义化
(2)给父元素添加overflow:hidden样式(不推荐使用)
(3)使用伪元素:after
<div class="box">
<div class="left-box" style='float:left'>左边</div>
<div class="right-box" style='float:right'>右边</div>
</div>
.box:after{
display: "block";
clear:both;
height:0;
content: "";
visibility: hidden;
overflow:hidden;
}
推荐使用第三种方法清除浮动