清除浮动方法
1, 对父级设置适合 CSS 高度, 父级元素撑开并且包含子元素.
- <p> 固定高度</p>
- <div style="height: 50px;">
- <i>Float Test</i>
- <div style="float: left; background: red; height: 50px;">Float Left</div>
- <i>Float Test</i>
- </div>
2, 父级标签 --- 附加样式属性'overflow'属性值为'auto'或者'hidden'. 即可清除浮动
- <p>overflow hidden</p>
- <div style="overflow: hidden;">
- <i>Float Test</i>
- <div style="float: left; background: red; height: 50px;">Float Left</div>
- <i>Float Test</i>
- </div>
- <p>overflow auto</p>
- <div style="overflow: auto;">
- <i>Float Test</i>
- <div style="float: left; background: red; height: 50px;">Float Left</div>
- <i>Float Test</i>
- </div>
3, 附加子元素样式设为 clear:both. 即可清除浮动
- <p > 附加元素</p>
- <div>
- <i>Float Test</i>
- <div style="float: left; background: red; height: 50px;">Float Left</div>
- <i>Float Test</i>
- <div style="clear: both;"></div>
- </div>
4,CSS3 伪元素, 父级标签附加 class. 即可清除浮动.
- // html
- <div class="clearfix">
- <p>Float Test</p>
- <div style="float: left; background: red; height: 50px;">Float Left</div>
- <p>Float Test</p>
- <p>Float Test</p>
- <div style="float: left; background: red; height: 50px;">Float Left</div>
- <p>Float Testdas</p>
- <p>Float Testsdasdas</p>
- <p>Float Testasdasdasda</p>
- </div>
- // css
- .clear_fix::after {
- content: ".";
- clear: both;
- display: block;
- line-height: 0;
- overflow: hidden;
- font-size: 0;
- height: 0;
- }
- .clear_fix {
- zoom: 1;
- }
- }
清除浮动方式总结
方式一: 固定高度, 已知高度可以使用该方式.
方式二: 父元素设置样式属性 overflow, 预知内容的宽高与父一致可以采用该方式.
a. hidden 如果子的内容宽高超出父的宽高, 则子内容超出部分会被修剪
b. hidden 如果子的内容宽高超出父的宽高, 则子内容超出部分会被修剪
方式三: 子元素清除浮动. 该方式最为灵活, 便于理解, 易上手, 但会产生冗余的代码和元素.
方式四: 伪元素清除浮动. 建议采用该方式
a. 该方式 HTML 代码更加干净, 在代码中不会存在冗余的元素, 在 document tree 中, 该元素依然存在.
b. 该方式仅限于清除该盒子结尾的浮动, 类似于方式一和二, 因为伪元素仅支持在该元素内容的最开始和结尾(::before,::after)
document tree 可视化渲染模型(visual formatting model)
渲染模型由三种组成
正常流 (normal flow): 由块级元素(block-level boxes) 和行级元素 ( inline-level boxes) 组成
浮动 (floats): 首先会脱离正常流, 然后根据属性向左上或者右上浮动, 至最近块级元素(block-level boxes) 的上下文内容 (Content) 最左或最右侧.
如果没有清除浮动, 浮动后, 剩余的上下文内容(浮动塌陷), 会被块级元素后的正常流元素填充, 即布局错乱.
绝对定位(Absolute positioning): 脱离所有的束缚, 常称为脱离文档流. 当 position, 值为'absolute'或者'fixed'创建新的一层, 根据 z-index 设置层级, 根据 left,right,top,bottom 属性决定安置的位置.
https://www.w3.org/TR/CSS21/visuren.html#visual-model-intro
浮动塌陷
如果一个盒子里子对象使用了 CSS float(浮动)属性, 盒子不能包裹子对象, 浮动塌陷就产生了.
公式: 父级对象高度 (div content) 小于浮动子对象高度时(div style="float: left;"), 如图:
1, 父对象盒子 === display: block === 块元素
当父对象没有设置高度时, 默认会被块级或者行级的对象撑开高度, 但不会被浮动子对象撑开高度
2, 浮动子对象
浮动至父对象的上下文 (content) 内, 最左或最右, 该父对象的最左或最右的宽度会减小. 浮动对象是存在于上下文内的, 会受盒子属性 maigin,padding,border 影响(如图绿色边框).
3, 塌陷区域
浮动后, 剩余的上下文内容(如图黄色区域), 会被块级元素后的正常流元素填充. 即布局错乱.
浮动负面影响
盒子内容 (高度, 边框) 不能撑开, 导致背景不能正常显示, margin padding 设置值不能正确显示.
布局错乱, 不能按预想的布局正常显示.
来源: https://www.cnblogs.com/xuyao100/p/8940958.html