CSS中如何清除浮动的影响

一.认识浮动

1.概念

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。（脱标----脱了标准流）

2.作用

①浮动可以控制图片，实现文字环绕图片的效果。

②浮动可以让多个div水平排成一行

二.应用

1.用普通流的大盒子（父级）定义上下顺序---占位

2.使用浮动在大盒子内部，设置小盒子的位置---水平排列

注意：在使用float布局时，如果无法继续向右摆放新盒子，那么将会在下一行显示

 三.如何清除浮动

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器 {clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

1.额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签。

 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。

2.给父级添加overflow属性

可以通过触发BFC的方式，可以实现清除浮动效果。

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.双伪元素清除浮动

::after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：在父盒子上使用

.clearfix::after,.clearfix::before{
    content: "";
    display: block;
    height: 0px;
    visibility: hidden;
    clear: both;
}

优点： 代码更简洁

缺点： 可能会受到浏览器的限制而无法实现效果。