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清楚浮動的常用方式有哪些”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！