高度塌陷（開啟BFC）
阿新 • • 發佈：2022-05-12
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高度塌陷</title> <style type="text/css"> .box { border: 1px solid red; /* BFC無法直接開啟，需要通過一些屬性來開啟BFC 1.設定元素浮動可以開啟BFC 2.將元素設定為行內塊元素 3.可以將元素的overflow設定為一個非visible的值 通過overflow: hidden來開啟BFC，從而解決高度塌陷的問題*/ overflow: hidden; } .box1 { width: 100px; height: 100px; background-color: #bfa; float: left; /* 高度塌陷 塊元素的高度預設情況下是被子元素撐開的，如果子元素浮動，將會完全脫離文件流，脫離文件流 子元素無法撐起子元素高度，將會導致父元素高度丟失，父元素一旦丟失頁面則其他元素也會移動 導致佈局混亂 BFC（Block Format Content） 塊級格式化環境 BFC是元素的一個隱藏屬性，一旦元素開啟了BFC它將會開啟一個獨立的佈局區域 這個佈局區域將會具有一些特殊性質 1.開啟了BFC的元素子元素的垂直外邊距不會傳遞給父元素 2.開啟了BFC的元素不會被浮動的元素所覆蓋 3.開啟了BFC的元素可以包含浮動的子元素*/ } .box2 { width: 300px; height: 200px; background-color: orange; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> <div class="box2"></div> </body> </html>