float清除浮动

float清除浮动

float是css中布局非常常用的属性，通过设置浮动能够实现一些常见的布局，但是刚接触float属性的人很有可能会遇到一些问题。

1. float，可以让元素能够朝着一个方向进行浮动，常用float:right和float:left
.

 .content{
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: left;
    margin-left: 4px;
}

**2.**float元素虽然好用，但是它的问题也让人头痛，我给上面的三个content外面包裹一层div.wrapper,设置border,最后结果…

出现这样的结果是因为外层的wrapper不能够包裹住三个子元素，因为当给元素添加浮动之后，就会产生浮动流，而这些元素不能够被块级元素看见，所以外层的div就不会被子元素自动撑开。
那么是不是所有的元素都看不见带有浮动流的元素呢？当然不是，文本元素，带有文本属性，比如inline-block这样的元素，以及bfc元素都能够看见。

img就是默认带有display:inline-block的元素，所有结果如上图。
3.知道了有浮动流的存在会影响布局，那么怎么样清除浮动流，目前常用的做法就是通过父级的伪元素::aftert来实现。

.content{
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: left;
    margin-left: 4px;
}
.wrapper{
    border: 1px solid black;
    width: 500px;
}
.wrapper::after{
    content: "";
    display: block;
    clear: both;
}

总结
float是css布局中非常常用的属性，使用float会产生不对块元素可见的浮动流，可以在父级伪元素after上清除浮动流
清除浮动三件套

 content: "";
    display: block;
    clear: both;