一、清除浮動的第三種方式
1.隔墻法有兩種?如下：外墻法和內墻法?，?
2.外墻法
（1）在兩個盒子中間添加一個額外的塊級元素
（2）給這個額外添加的塊級元素設定：clear:both;屬性
注意點：外墻法可以讓第二個盒子使用margin-top屬性
但是不能讓第一個盒子使用margin-bottom屬性
解決方案：為了避免上面的問題，我們在“?墻”所在的元素設定高度就解決這個問題了，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D134_ClearFloatThree</title> <style> .box1{ background-color: red; /*border:1px white solid;*/ } .box2{ background-color: green; /*border:1px white solid;*/ } .box1 p{ width:100px; background-color: blue; float:left; } .box2 p{ width:100px; background-color: red; float:left; } .wall{ clear:both; height:20px; } </style> </head> <body> <div class="box1"> <p>我是文字1</p> <p>我是文字2</p> <p>我是文字3</p> </div> <div class="wall h20"></div><!--這里還復習了一個標簽可以定義多個class屬性的方式，多個屬性可以統一設定樣式--> <div class="box2"> <p>我是文字4</p> <p>我是文字5</p> <p>我是文字6</p> </div> </body> </html>
3.內墻法
（1）在兩個盒子中間添加一個額外的塊級元素
（2）給這個額外添加的塊級元素設定clear:both;屬性
注意點：外墻法可以讓第二個盒子使用margin-top屬性
也可以讓第一個盒子使用margin-bottom屬性
下面我們只修改上面例子的幾行代碼即可
.wall{ clear:both; /*height:20px;*/ } .......省略代碼........ <div class="box1"> <p>我是文字1</p> <p>我是文字2</p> <p>我是文字3</p> <div class="wall"></div> </div>
4.外墻法與內墻法的區別
外墻法不能撐起第一個盒子的高度，而內墻法可以撐起第一個盒子的高度?，
5.?注意點：不常用的外墻和內墻法，外墻法容易降低易讀性，不知干什么的；內墻則違背了我們樣式設計和內容相分離的初衷，所以僅作了解
三、原始碼：
D134_ClearFloatThree.html
D135_ClearFloatInternalWallMethod.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D134_ClearFloatThree.html
https://github.com/ruigege66/HTML_learning/blob/master/D135_ClearFloatInternalWallMethod.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流，后臺回復“禮包”獲取Java大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106466.html
標籤：Html/Css
上一篇：CSS尺寸樣式屬性
下一篇：vuex的模塊化使用