清除浮動的幾種方式
阿新 • • 發佈：2021-08-09
1.clear（css屬性）
在添加了浮動的最近一個兄弟元素加上 clear:both;就可清除浮動
驗證程式碼：
<style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } li { float: left; width: 100px; height: 100px; background-color: pink; margin: 5px; } p{ clear: both; height: 50px; background-color: aquamarine } </style> <body> <div id="" class="box1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> <p>明天的我，要做的不是一個優秀的別人，而是一個更好的自己</p> <h6>以自己喜歡的方式過一生</h6> <h4>如果結果不如你所願，就在塵埃落定前奮力一搏</h4> </div> </body>
2.BFC 塊格式化上下文
塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素互動的區域。
2.1 在新增浮動的父級元素加上overflow（屬性除visibility）
ul{
overflow: auto|hidden;
}
2.2 在新增浮動的父級元素加上display:flow-root
ul{
/* overflow: hidden; */
display: flow-root;
}
2.3 在新增浮動的父級元素加上display:inline-block
ul{
display:inline-block;
}
2.4 在新增浮動的父級元素加上 display:table-cell
2.5 在新增浮動的父級元素加上 contain屬性
ul{
contain: layout;
/* contain: content; */
contain: paint;
}