Css清楚浮动的几种常用方式

在使用css布局当中，经常会用到使用浮动布局，但是浮动之后元素就会产生脱离文档流而浮动在页面上，导致父亲节点感应不到页面的高度产生高度坍塌而让后续的子节点被浮动的节点遮盖，这时就需要使用清除浮动让节点感应到浮动节点的高度方便布局。

在清除浮动中可以使用一下发放实现清除浮动

在清除浮动中常用的就是使用clear:both清除两边的浮动效果。这个可以使用增加div节点的方式实现。

也可是使用bootstrap使用的清除浮动的方式，使用after和before的伪类来实现清除浮动

清除浮动主要的目的就是让父亲节点感应到浮动子节点的高度，可以使用overflow：hidden来让父亲节点感应到子节点高度，当然这样的使用方法会让本来要不使用此属性的节点产生超出部分隐藏，这个需要注意。

谈谈css中的清除浮动

bootstrap使用的清除浮动less

浮动中产生的bug

在实现浮动中，如果一个节点浮动，另外一个节点不浮动，那么没有浮动的节点中的内容使用bootstap清除浮动，感应到的就是浮动节点的高度导致产生不必要的麻烦。

css代码：

.clearfix:after{

content: " ";

display: table;

}

.clearfix:bofore{

content: " ";

display: table;

}

.clearfix:after{

clear: both;

}

#nav{

float: left;

width: 100px;

height:300px;

background-color: red;

position: relative;

}

.content{

height: 600px;

margin-left: 100px;

background-color: green;

}

.inner{

background-color: #fff;

color: #ff4500;

}

.inner p{

box-sizing: boder-box;

-webkit-box-sizing: border-box;

width: 50%;

text-align: center;

float: left;

background-color: #cecece;

padding: 10px 0;

}

.last{

border-left: 1px solid #dcdcdc;

}