寫網頁的時候很多地方會插入
<div class="clearfix"></div>
這個有什麼作用?
這裡的clearfix是樣式名。樣式寫在CSS文件中。
浮動的概念
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中,所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
參考:
clearfix(清除浮動)
https://blog.csdn.net/weixin_41041379/article/details/81871980
Bootstrap的clearfix
通過添加一個clearfix實用程序,快速輕鬆地清除容器中的浮動內容。
通過添加.clearfix
到父元素可輕鬆清除floats
。也可以用作混音。
範例1:
以下示例顯示了如何使用clearfix。如果沒有clearfix,則換行div不會跨越會導致布局破碎的按鈕。
<div class="bg-info clearfix"> <button type="button" class="btn btn-secondary float-left">Example Button floated left</button> <button type="button" class="btn btn-secondary float-right">Example Button floated right</button></div>
1.div的內容太多會導致後面的div錯位
<div>
<div class="row" style="background:red;">
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:pink;">a1內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:purple;">a2</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:orange;">b1</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:green;">b2</div>
</div>
</div>
2.增加clearfix,修復錯位
<div>
<div class="row" style="background:red;">
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:pink;">a1內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多內容太多</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:purple;">a2</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:orange;">b1</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:green;">b2</div>
</div>
</div>
Bootstrap clearfix 如何優雅的讓row之間 隔開一點
在寫前端頁面的時候,發現一個小問題,兩個row之間緊緊的挨在一起,視覺效果很差,因此想辦法怎樣讓兩個row之間隔開一點,最初嘗試了加
標籤,但是總覺得不是最好的方法,又不希望修改bootstrap css,不想破壞bootstrap的一致性。
首先看一下row緊挨在一起的樣子
(https://img-blog.csdn.net/20170815093613617?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VubWluZzAzMjc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
再看一下隔開一點的樣子
(https://img-blog.csdn.net/20170815093652768?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VubWluZzAzMjc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
實際上就時在兩個div之間增加了一個div:
</div>
<div class="clearfix" style="margin-bottom: 5px;"></div>
<div class="form-inline">