html 盒子模型基礎（高度塌陷問題，BFC詳解）（六）
阿新 • • 發佈：2018-12-17
1.高度塌陷問題解決：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ /*設定一個邊框*/ border: 10px red solid; /* 父元素的高度，預設被子元素撐開，目前來講box2多高，box1就多高。 此時如果子元素設定浮動，則會導致其完全脫離文件流，子元素脫離文件流將無法撐開父元素， 導致父元素的高度丟失，就是我們說的高度塌陷問題。父元素一旦高度塌陷，則它下邊的元素會向上移動， 導致整個頁面的佈局混亂 * */ /*指定父元素的高度，但是將父元素的高度寫死將無法自動適應子元素的高度，不太靈活*/ /*height: 200px;*/ /* BFC (Block Formatting Context) 塊級格式化環境 - BFC是元素的隱含屬性，預設情況下BFC是關閉的，當元素開啟BFC以後將會具有如下特性： 1.開啟BFC以後，元素不會被浮動的元素所覆蓋 2.開啟BFC以後，子元素的垂直外邊距不會傳遞給父元素 3.開啟BFC以後，元素可以包含浮動的子元素 我們並不能直接去開啟BFC，而需要使用一些特殊的樣式來間接的開啟元素的BFC, 開啟BFC的方式很多，但是都會有一些副作用，我們需要選擇一些副作用小的方式 1.設定元素的浮動 2.設定元素的display為inline-block 3.設定元素絕對定位。。。 4.將元素的overflow設定為一個非visible的值 * * */ /*float: left;*/ /*display: inline-block;*/ overflow: hidden; } .box2{ width: 200px; height: 200px; background-color: yellow; /*設定子元素向左浮動*/ float: left; } .box3{ height: 100px; background-color: #bfa; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <div class="box3"></div> </body> </html>
2.BFC詳解：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: red; /*開啟父元素的bfc*/ overflow: hidden; } .box2{ width: 100px; height: 100px; background-color: yellow; margin-top: 100px; } .box3{ width: 100px; height: 100px; background-color: yellowgreen; float: left; } .box4{ width: 100px; height: 100px; background-color: skyblue; /*開啟BFC*/ overflow: hidden; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <div class="box3"></div> <div class="box4"></div> </body> </html>
