.jpg)
# 浮动的特点
脱标、贴边、字围、收缩
<style>
div{
float: left;
background-color: red
}
</style>
</head>
<body>
<div>
这是一段文字
</div>
</body>
得到的效果
这是一段文字
我们都知道div标签是块级元素，会独占一行，然而上面的例子中将div设置为左浮后，其宽度不再是占满一行，而是收紧为内部元素的宽度，这就是浮动第四个特征的含义
# 缺点
父容器高度塌陷，于是清理浮动就显着至关重要。
# 清除浮动
清除浮动不是不用浮动，清除浮动产生的父容器高度塌陷。
清除浮动不是不用浮动，清除浮动产生的父容器高度塌陷。
如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。clear:both
<div id="wrap">
<div id="inner"></div>
<div style="clear: both;"></div>
</div>
- 伪元素清除浮动
<div id="wrap" class="clearfix">
<div id="inner"></div>
</div>
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
line-height:0;
visibility:hidden;//允许浏览器渲染它，但是不显示出来
}
- BFC