float浮动排列及清除

最新推荐文章于 2023-11-20 15:24:50 发布

chuke5164

最新推荐文章于 2023-11-20 15:24:50 发布

阅读量185

点赞数

文章标签： php

原文链接：https://my.oschina.net/u/4181724/blog/3093628

版权

float

元素设为浮动后会变为包裹性，若没有明确宽度，宽度则是元素里的内容宽度。浮动元素会生成一个块级框，这里的块级框是不换行的（其实也就是向左对齐的inline-block）

需要注意一点，在设置子容器宽度为50%，如果设置了具体的边框或者内外边距，两个子容器是无法并排的，因为剩余宽度无法容纳第二个子容器的宽度。

接下来我们来看一下子容器高度不一致时float为left的情况。

非浮动会无视浮动元素的位置直接占位，只有其中的文本会受到影响（进行环绕）。

为了使浮动元素之后的元素正常排列，我们的常规方法大都是使用clear，clear:both的作用本质是让自己不和 float元素在一行显示，并不是真正意义上的清除浮动，浮动元素依然撑不起父容器的高度。如果clear：both后面的元素使用margin上移至浮动元素同行范围内，依旧会发生文字环绕。

如果觉得clear足够用，建议采取伪元素的方式：

.clear:after{
    content: '  ';
    display: table;
    clear: both;
}

由此可见，clear:both只能在一定程度上消除浮动的影响，要想完美地去除浮动元素的影响，应该利用BFC。

块级格式化上下文会阻止外边距叠加
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
块级格式化上下文不会重叠浮动元素
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加==负的外边距时将会不起作用===。
块级格式化上下文通常可以包含浮动

通俗地来说：创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。

为浮动元素的容器添加：

.lbf-content {
    overflow: hidden;
    }

.lbf-content {
    display: table-cell; 
    width: 9999px;
}

添加overflow：hidden有个缺点，如果子元素要定位到父元素的外面可能会被隐藏，所以还是要视情况而用。

第二种会让连续英文字符换行，解决方法：

.word-break {
    display: table;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
}

转载于:https://my.oschina.net/u/4181724/blog/3093628