写网页的时候很多地方会插入
<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">