Css清楚浮动的常用方式有哪些

小编给大家分享一下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;

}

看完了这篇文章，相信你对“Css清楚浮动的常用方式有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网JavaScript频道，感谢各位的阅读！