CSS div布局 一行多列
https://www.xiaobuteach.com/html/div-layout/cols.html?from=bili
CSS div布局 一行多列
div布局實現(xiàn)一行多列的關鍵屬性：float屬性設置浮動；
同時需要clear屬性清除浮動。
1 float屬性簡介
float屬性設置浮動。
float屬性值說明none默認值。不浮動。left左浮動。當前元素沒有了換行效果。right右浮動。當前元素沒有了換行效果。
例1：一行三列。
<body>
? ?<!-- float屬性 -->
? ?<div style="float: left;width: 100px;">第1列</div>
? ?<div style="float: left;width: 100px;">第2列</div>
? ?<div style="float: left;width: 100px;">第3列</div>
</body>
運行效果
2 浮動塌陷
2.1 多行
在例1，我們實現(xiàn)了浮動效果。
現(xiàn)在實現(xiàn)：3行，第1行分多列。
每一行，需要外層一個div，然后這個div嵌套多個float的div表示列。
例2：共3行，第1行分3列。
? ?<div><!-- 這對div表示第1行-->
? ? ? ?<div style="float: left;width: 100px;">1行1列</div>
? ? ? ?<div style="float: left;width: 100px;">1行2列</div>
? ? ? ?<div style="float: left;width: 100px;">1行3列</div>
? ?</div><!-- 第1行結(jié)束-->
? ?<div><!-- 這對div表示第2行-->
? ? ? ?第2行
? ?</div><!-- 第2行結(jié)束-->
? ?<div>
? ? ? ?第3行
? ?</div>
出問題了：第2行沒有換行，第3行正常換行。為什么？
2.2 浮動塌陷
F12查看第1行的div，其高度為0。這就是浮動塌陷。
2.3 浮動塌陷的原因
當div設置float屬性為left或right時，導致外層的div的高度失效，即為0。
下節(jié)介紹如何解決浮動塌陷的方法。
3 CSS div布局 解決浮動塌陷
方法1：設置高度
既然外層div高度為0，我們手動給外層div加上高度即可。
<body>
? ?<div style="height: 40px;">
? ? ? ?<div style="float: left;width: 100px;">1行1列</div>
? ? ? ?<div style="float: left;width: 100px;">1行2列</div>
? ? ? ?<div style="float: left;width: 100px;">1行3列</div>
? ? ? ?
? ?</div>
? ?<div>
? ? ? ?第2行
? ?</div>
? ?<div>
? ? ? ?第3行
? ?</div>
</body>
適用場景：行的高度固定。
方法2：clear清除浮動
設置clear:both來清除浮動。
通常在內(nèi)層最后一個div并列加一個僅設置clear:both樣式無內(nèi)容的div。
注意事項：一定要注意這個專用的清除浮動的div的位置。
<body>
? ?<div>
? ? ? ?<div style="float: left;width: 100px;">1行1列</div>
? ? ? ?<div style="float: left;width: 100px;">1行2列</div>
? ? ? ?<div style="float: left;width: 100px;">1行3列</div>
? ? ? ?<!-- 專用的清除浮動的div，僅有樣式無內(nèi)容。在代表行的div的內(nèi)部，最后一個。 -->
? ? ? ?<div style="clear: both;"></div>
? ?</div>
? ?<div>
? ? ? ?第2行
? ?</div>
? ?<div>
? ? ? ?第3行
? ?</div>
</body>
完成。
適用場景：行的高度不確定，由其中內(nèi)容確定。
方法3：偽類清除浮動
通過after偽類在元素的內(nèi)部結(jié)束位置添加類似清除的div。
本質(zhì)同方法2，只是寫法上不用寫專用清除浮動的div，而是通過偽類after添加這個div。
<head>
? ?<meta charset="UTF-8">
? ?<title>CSS 偽類清除浮動 | 小步教程</title>
? ?<style>
? ? ? ?/* 清除浮動的樣式 */
? ? ? ?.class1::after{
? ? ? ? ? ?content: '';
? ? ? ? ? ?display: block;
? ? ? ? ? ?clear:both;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<div class="class1">
? ? ? ?<div style="float: left;width: 100px;">1行1列</div>
? ? ? ?<div style="float: left;width: 100px;">1行2列</div>
? ? ? ?<div style="float: left;width: 100px;">1行3列</div>
? ? ? ?<!-- 通過在外層div加after偽類樣式，實現(xiàn)下方加div的同等效果 -->
? ? ? ?<!-- <div style="clear: both;"></div> -->
? ?</div>
? ?<div>
? ? ? ?第2行
? ?</div>
? ?<div>
? ? ? ?第3行
? ?</div>
</body>
方法4：公共樣式清除浮動
當多個div，每個樣式都像上面的方法清除浮動，略麻煩，可以設計公共類clearfix專門清除浮動。
前端行業(yè)大家已經(jīng)約定俗成都用clearfix這個類名。
<head>
? ?<meta charset="UTF-8">
? ?<title>CSS 偽類清除浮動 | 小步教程</title>
? ?<style>
? ? ? ?/* 公共樣式清除浮動*/
? ? ? ?.clearfix::after{
? ? ? ? ? ?content: '';
? ? ? ? ? ?display: block;
? ? ? ? ? ?clear:both;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<div class="class1 clearfix">
? ? ? ?<div style="float: left;width: 100px;">1行1列</div>
? ? ? ?<div style="float: left;width: 100px;">1行2列</div>
? ? ? ?<div style="float: left;width: 100px;">1行3列</div>
? ? ? ?<!-- 通過在外層div加after偽類樣式，實現(xiàn)下方加div的同等效果 -->
? ? ? ?<!-- <div style="clear: both;"></div> -->
? ?</div>
? ?<div class="clearfix">
? ? ? ?<div style="float: left;width: 100px;">2行1列</div>
? ? ? ?<div style="float: left;width: 100px;">2行2列</div>
? ?</div>
? ?<div>
? ? ? ?第3行
? ?</div>
</body>
上述兩個div都使用了clearfix類。
可以把clearfix樣式放到公共的css文件，需要的地方引用css，直接使用clearfix即可。
