小編給大家分享一下Css清楚浮動的常用方式有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的做網(wǎng)站、網(wǎng)站制作質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠為行業(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式成都營銷網(wǎng)站建設(shè)需求，讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價值！

在使用css布局當(dāng)中，經(jīng)常會用到使用浮動布局，但是浮動之后元素就會產(chǎn)生脫離文檔流而浮動在頁面上，導(dǎo)致父親節(jié)點感應(yīng)不到頁面的高度產(chǎn)生高度坍塌而讓后續(xù)的子節(jié)點被浮動的節(jié)點遮蓋，這時就需要使用清除浮動讓節(jié)點感應(yīng)到浮動節(jié)點的高度方便布局。

在清除浮動中可以使用一下發(fā)放實現(xiàn)清除浮動

在清除浮動中常用的就是使用clear:both清除兩邊的浮動效果。這個可以使用增加div節(jié)點的方式實現(xiàn)。

也可是使用bootstrap使用的清除浮動的方式，使用after和before的偽類來實現(xiàn)清除浮動

清除浮動主要的目的就是讓父親節(jié)點感應(yīng)到浮動子節(jié)點的高度，可以使用overflow：hidden來讓父親節(jié)點感應(yīng)到子節(jié)點高度，當(dāng)然這樣的使用方法會讓本來要不使用此屬性的節(jié)點產(chǎn)生超出部分隱藏，這個需要注意。

談?wù)刢ss中的清除浮動

bootstrap使用的清除浮動less

浮動中產(chǎn)生的bug

在實現(xiàn)浮動中，如果一個節(jié)點浮動，另外一個節(jié)點不浮動，那么沒有浮動的節(jié)點中的內(nèi)容使用bootstap清除浮動，感應(yīng)到的就是浮動節(jié)點的高度導(dǎo)致產(chǎn)生不必要的麻煩。

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清楚浮動的常用方式有哪些”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！