目录

文档流正常的文档流浮动以后--脱离后的文档流浮动以后--文档流布局解决遮盖问题--[高度塌陷问题]---[浮动问题]常见的bfc化清除浮动控制台F12中查看

文档流

正常的文档流

正常的文档流 就像是在一站纸上面排列

你的大小就是占据的大小

常见的

浮动以后–脱离后的文档流

黄色发生浮动 发生文档流脱离黄色的div脱离文档流

不再占据body的大小飘动到上面 此时body的高度就会缩小当全部浮动后 都脱离文档流body没有元素撑开 高度就是0 发生塌陷

4. 此时body的高度就是0

四个div 都脱离文档

按照float right进行排列

浮动以后–文档流布局

此时再向body添加元素 黑色的div

就会先把body 撑开

因为上面div脱离文档流 层级高于文档流 就会产生遮盖的效果

解决遮盖问题–[高度塌陷问题]—[浮动问题]

1.把四个div用一个content容器包裹住

给content 设置

bfc化或是

清楚浮动

2.bfc 或是清除浮动

content将会根据元素产生

高度

又因为content在body中

body会被留下content的大小

黑色div 就不会再被遮盖了

常见的bfc化

浮动元素（元素的 float 不是 none）

绝对定位元素（元素的 position 为 absolute 或 fixed）

行内块元素（元素的 display 为 inline-block, flow-root;）

表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）

表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

overflow 计算值(Computed)不为 visible 的块元素

常用的是

overflow:hidden

display: flow-root;

更多内容

/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

清除浮动

1.给content 添加一个伪元素::after

content::after{content:””;clear:both/left/right}

2 给父元素的里面在最后面添加个空的div子元素或者在红色div下面新增一个div

并把新增的div设置

clear:both/left/right

<div class="content"><div class="a"></div> <!-- //浮动 --><div class="b"></div><!-- //浮动 --><div class="c"></div><!-- //浮动 --><div class="d"></div><!-- //浮动 --><div style="clear: both;"></div><!-- 设置clear --></div>

控制台F12中查看

F12 打开控制台

在控制台 的图层中

能够清晰看到图层的概念

也就是文档流