CSS3——解決父級元素包裹子級元素的方法（偽元素+其他）
阿新 • • 發佈：2018-12-30
利用偽元素清除浮動：
你要解決浮動的為題必須在父級的邏輯的後面加上一個p元素來清除浮動吧，你加完p元素之後破壞結構了，不好，咱相加，又不能加，就用偽元素最合適了吧！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } .demo::after{ content: ""; clear: both; } .demo{ border: 1px solid black; } .demo1{ float: left; width: 100px; height: 100px; background-color: black; color: #fff; } </style> <title></title> </head> <body> <div class="demo"> <div class="demo1">1</div> <div class="demo1">2</div> <div class="demo1">3</div> </div> </body> </html>
你看看好使嗎？
不好使，這個clear元素有點特殊，你想讓他生效的話，必須得是塊級元素才行，所以我得把after改成塊元素，display: block;
你就算有再多的子元素，父級元素也能包裹子元素。
除了清除浮動之外還有沒有其他的方法解決？
為什麼父級元素包不住他呢？
是因為浮動元素有浮動流，父級元素是塊元素，塊元素看不到他。那，能看到他的元素是不是有一大堆啊？
所以你給父級加上，display: inline-block;或float: left;
或position: absolute;都可以（有可能你看不出來，不妨把父級的border改成border: 3px solid red;試試）。
現在你看，雖然是父級元素包住子級元素了，但是他的父級沒有原來那麼寬了。
拓展：
凡是設定了float: left/right;或position: absolute;的，系統會自動從內部把元素給你轉換成inline-bolck，你要是變成了行級塊元素，寬高就是由內容決定！