html網(wǎng)頁的布局方式之如何清除浮動

這篇文章主要介紹html網(wǎng)頁的布局方式之如何清除浮動，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　盒子的高度問題

　　1.標準流中盒子的高度可以被內(nèi)容高度撐起來;

　　2.浮動流中浮動的內(nèi)容不能撐起盒子的高度;

　　為什么要清楚浮動?

　　相鄰的盒子之間,如果前面的盒子沒有高度,那么后面盒子中的浮動元素就會去找前面盒子中的浮動元素,這樣會導致界面混亂,所以需要清除浮動;

　　清除浮動方式一:

　　解決方案:

　　給前面一個父元素設置高度

　　注意點:

　　在企業(yè)開發(fā)中,我們能不寫高度就不寫高度,所以這種方式用得很少;

　　CSS:

　　<style>

　　*{

　　margin:0;

　　padding:0;

　　}

　　.box1{

　　height:20px;//給前面盒子設置高度

　　background-color:red;

　　}

　　.box2{

　　background-color:green;

　　}

　　.box1p{

　　width:100px;

　　background-color:blue;

　　}

　　.box2p{

　　width:100px;

　　background-color:yellow;

　　}

　　p{

　　float:left;

　　}</style>

　　body:

　　<divclass="box1">

　　<p>我是文字1</p>

　　<p>我是文字1</p>

　　<p>我是文字1</p></div><divclass="box2">

　　<p>我是文字2</p>

　　<p>我是文字2</p>

　　<p>我是文字2</p>

　　</div>

　　清除浮動方式二:

　　解決方案:

　　給后面的盒子添加clear:both;屬性

　　clear屬性取值:

　　none:默認取值,按照浮動元素的排序規(guī)則來排序(左浮動找左浮動,右浮動找右浮動)

　　left:不要找前面的左浮動元素(也就是:不要和前面的左浮動元素顯示在一行)

　　right:不要找前面的右浮動元素

　　both:不要找前面的左浮動元素和右浮動元素

　　注意點:

　　當我們給某個元素添加clear屬性之后,那么這個屬性的margin屬性就會失效;所以不推薦使用

　　CSS:

　　<style>

　　*{

　　margin:0;

　　padding:0;

　　}

　　body{

　　border:1pxsolid#000;

　　}

　　.box1{

　　background-color:red;

　　}

　　.box2{

　　background-color:green;

　　clear:both;//給后面的盒子添加clear:both;屬性

　　margin-top:28px;

　　}

　　.box1p{

　　width:100px;

　　background-color:blue;

　　}

　　.box2p{

　　width:100px;

　　background-color:yellow;

　　}

　　p{

　　float:left;

　　}</style>

　　清除浮動方式三:

　　解決方案:

　　外墻法:在兩個有浮動子元素的盒子之間添加一個額外的塊級元素;并且設置clear:both;屬性;

　　注意點:

　　外墻法它可以讓第二個盒子使用margin-top屬性,

　　外墻法不可以讓第一個盒子使用margin-bottom屬性,

　　不過可以通過設置額外標簽的高度來實現(xiàn)margin效果;

　　搜狐中大量使用了這個技術,但是由于需要添加大量無意義的標簽,所以不推薦使用;

　　CSS:

　　<style>

　　*{

　　margin:0;

　　padding:0;

　　}

　　.box1{

　　background-color:red;/*margin-bottom:10px;*///外墻法不可以讓第一個盒子使用margin-bottom屬性,

　　}

　　.box2{

　　background-color:green;/*margin-top:10px;*///外墻法它可以讓第二個盒子使用margin-top屬性,

　　}

　　.box1p{

　　width:100px;

　　background-color:blue;

　　}

　　.box2p{

　　width:100px;

　　background-color:yellow;

　　}

　　p{

　　float:left;

　　}

　　.wall{

　　clear:both;//設置clear:both;屬性;

　　}

　　.h30{

　　height:20px;//設置額外標簽的高度來實現(xiàn)margin效果;

　　background-color:skyblue;

　　}

　　</style>

　　<divclass="box1">

　　<p>我是文字1</p>

　　<p>我是文字1</p>

　　<p>我是文字1</p></div><divclass="wallh30"></div>//外墻法:在兩個有浮動子元素的盒子之間添加一個額外的塊級元素;<divclass="box2">

　　<p>我是文字2</p>

　　<p>我是文字2</p>

　　<p>我是文字2</p></div>

　　清除浮動方式四:

　　解決方案:

　　內(nèi)墻法:

　　1在第一個盒子中所有子元素最后添加一個額外的塊級元素,

　　2給這個額外添加的塊級元素設置clear:both;屬性

　　注意點:

　　內(nèi)墻法它可以讓第二個盒子使用margin-top屬性

　　內(nèi)墻法它可以讓第一個盒子使用margin-bottom屬性

　　<a>內(nèi)墻法會自動撐起盒子的高度,所以可以直接設置margin屬性</a>

　　外墻法和內(nèi)墻法區(qū)別?

　　外墻法不能撐起第一個盒子的高度,而內(nèi)墻法可以撐起第一個盒子的高度

　　在企業(yè)開發(fā)中<a>不常用隔墻法</a>來清除浮動(隔墻法:外墻法和內(nèi)墻法)

　　CSS:

　　<style>

　　*{margin:0;padding:0;

　　}.box1{background-color:red;/*margin-bottom:10px;*/

　　}.box2{background-color:green;/*margin-top:10px;*/

　　}.box1p{width:100px;background-color:blue;

　　}.box2p{width:100px;background-color:yellow;

　　}p{float:left;

　　}.wall{clear:both;

　　}.h30{height:20px;background-color:skyblue;

　　}</style></head>

　　<divclass="box1">

　　<p>我是文字1</p>

　　<p>我是文字1</p>

　　<p>我是文字1</p>

　　<divclass="wallh30"></div>//設置內(nèi)墻</div><divclass="box2">

　　<p>我是文字2</p>

　　<p>我是文字2</p>

　　<p>我是文字2</p></div>

以上是“html網(wǎng)頁的布局方式之如何清除浮動”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！