AI专业者开发社区 1 号成员
  •  0 回帖  •  7 浏览  •  4 个月前
   

css之高度塌陷及其解决方法

浅谈 清除浮动 的多种方式（clearfix）

1. 什么是浮动 ? 是否脱离文档流?

1、普通流定位 static（默认方式） 

普通流定位，又称为文档流定位，是页面元素的默认定位方式 
页面中的块级元素：按照从上到下的方式逐个排列 
页面中的行内元素：按照从左到右的方式逐个排列 
但是如何让多个块级元素在一行内显示? 
这里就引出了浮动定位 

2、浮动定位 float 

float 属性 取值为 left/right 

脱离文档流

3、相对定位 relative 

元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留 
语法 
属性：position 
取值：relative 
配合着 偏移属性 (top/right/bottom/left) 实现位置的改变

4、绝对定位 absolute 

如果元素被设置为绝对定位的话，将具备以下几个特征 
1、脱离文档流 - 不占据页面空间 
2、通过偏移属性固定元素位置 
3、相对于 最近的已定位的祖先元素实现位置固定 
4、如果没有已定位祖先元素，那么就相对于最初的包含块 (body,html) 去实现位置的固定 
语法 
属性：position 
取值：absolute 
配合着 偏移属性 (top/right/bottom/left) 实现位置的固定

5、固定定位 fixed 

将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动 
语法 
属性：position 
取值：fixed 
配合着 偏移属性 (top/right/bottom/left) 实现位置的固定

2. 浮动的效果

    • 浮动 之后会怎么样？ 
      1、浮动定位元素会被排除在文档流之外 - 脱离文档流 (不占据页面空间), 其余的元素要上前补位 
      2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上 (元素只能在当前所在行浮动) 
      3、浮动元素依然位于父元素之内 
      4、浮动元素处理的问题 - 解决多个块级元素在一行内显示的问题 
      注意 
      1、一行内，显示不下所有的已浮动元素时，最后一个将换行 
      2、元素一旦浮动起来之后，那么宽度将变成自适应 (宽度由内容决定) 
      3、元素一旦浮动起来之后，那么就将变成块级元素, 尤其对行内元素，影响最大 
      块级元素：允许修改尺寸 
      行内元素：不允许修改尺寸 
      4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
    • 浮动 之后会有什么样的影响？ 
      由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成 0（高度塌陷）

3. 如何清除浮动

方案 1

直接设置父元素的高度 
优势：极其简单 
弊端：必须要知道父元素高度是多少

方案 2

在父元素中，追加空子元素，并设置其 clear 属性为 both 
clear 是 css 中专用于清除浮动的属性 
作用：清除当前元素前面的元素浮动所带来的影响 
取值： 
1、none 
默认值，不做任何清除浮动的操作 
2、left 
清除前面元素左浮动带来的影响 
3、right 
清除前面元素右浮动带来的影响 
4、both 
清除前面元素所有浮动带来的影响 
优势：代码量少 容易掌握 简单易懂 
弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护

方案 3

设置父元素浮动 
优势：简单，代码量少，没有结构和语义化问题 
弊端：对后续元素会有影响

方案 4

为父元素设置 overflow 属性 
取值：hidden 或 auto 
优势：简单，代码量少 
弊端：如果有内容要溢出显示 (弹出菜单)，也会被一同隐藏

方案 5

父元素设置 display:table 
优势：不影响结构与表现的分离，语义化正确，代码量少 
弊端：盒模型属性已经改变，会造成其他问题

方案 6

使用内容生成的方式清除浮动

1 .clearfix:after {
2    content:""; 
3    display: block; 
4    clear:both; 
5 }

:after 选择器向选定的元素之后插入内容 
content:""; 生成内容为空 
display: block; 生成的元素以块级元素显示, 
clear:both; 清除前面元素浮动带来的影响 
相对于空标签闭合浮动的方法 
优势：不破坏文档结构，没有副作用 
弊端：代码量多

方案 7

1 .cf:before,.cf:after {
2    content:"";
3    display:table;
4 }
5 .cf:after {clear:both;}

优势：不破坏文档结构，没有副作用 
弊端： 代码量多 
注意：display:table 本身无法触发 BFC，但是它会产生匿名框 (anonymous boxes)，而匿名框中的 display:table-cell 可以触发 BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过 display:table 和 display:table-cell 创建的 BFC 效果是不一样的（后面会说到 BFC）。

CSS2.1 表格模型中的元素，可能不会全部包含在除 HTML 之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。
所有的表格元素将会自动在自身周围生成所需的匿名 table 对象，使其符合 table/inline-table、table-row、table- cell 的三层嵌套关系。

疑问

为什么会 margin 边距重叠？ 
overflow:hidden, 语义应该是溢出: 隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为 0 了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？ 
为什么 display:table 也能清除浮动，原理是什么？

解释

要解释这些疑问，我们就要提到 Formatting context 
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 
最常见的 Formatting context 有 Block fomatting context(简称 BFC) 和 Inline formatting context(简称 IFC)。 
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC 

这里主要说 BFC

 BFC(Block formatting context) 直译为”块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。 block-level box，display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context。 
inline-level box， display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context。 
BFC 布局规则： 
1、内部的 Box 会在垂直方向，按照从上到下的方式逐个排列。 
2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 
3、每个元素的 margin box 的左边， 与包含块 border box 的左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 
4、BFC 的区域不会与 float box 重叠。 
5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 
6、计算 BFC 的高度时，浮动元素的高度也参与计算

 触发 BFC 的条件 

1、根元素 
2、float （left，right） 
3、overflow 除了 visible 以外的值（hidden，auto，scroll ） 
4、display (table-cell，table-caption，inline-block) 
5、position（absolute，fixed）

 举例详解 BFC

 1 <style>
 2    .top{
 3     width:100px;
 4     height:100px;
 5     background:red;
 6     margin:50px;
 7    }
 8    .bottom{
 9     width:100px;
10     height:100px;
11     background:blue;
12     margin:20px;
13    }
14 </style>
15 <body>
16     <div class="top"> 上 </div>
17     <div class="bottom"> 下 </div>
18 </body>

依据 BFC 布局规则第二条：

Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 
注意：发生重叠后，外边距的高度等于两个发生重叠的外边距的高度中的较大者

 1 <style>
 2    .top{
 3     width:100px;
 4     height:100px;
 5     background:red;
 6     float:left;
 7    }
 8    .bottom{
 9     width:200px;
10     height:200px;
11     background:blue;
12    }
13 </style>
14 <body>
15     <div class="top"></div>
16     <div class="bottom"></div>
17 </body>

依据 BFC 布局规则第三条：

每个元素的 margin box 的左边， 与包含块 border box 的左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 
我们可以看到，虽然有浮动的元素 top，但是 bottom 的左边依然与包含块的左边相接触

 1 <style>
 2    .top{
 3     width:100px;
 4     height:100px;
 5     background:red;
 6     float:left;
 7    }
 8    .bottom{
 9     width:200px;
10     height:200px;
11     background:blue;
12     overflow:hidden;
13    }
14 </style>
15 <body>
16     <div class="top"></div>
17     <div class="bottom"></div>
18 </body>

依据 BFC 布局规则第四条：

BFC 的区域不会与 float box 重叠。 
看代码和效果图，可以看出，这次的代码比上面的代码多了一行 overflow:hidden; 用这行代码触发新的 BFC 后，
由于这个新的 BFC 不会与浮动的 top 重叠，所以 bottom 的位置改变了

 1 <style>
 2    p{
 3     width:100px;
 4     height:100px;
 5     background:red;
 6     float:left;
 7    }
 8    div{
 9     width:200px;
10     border:1px solid blue;
11    }
12 </style>
13 <body>
14     <div>
15        <p></p>
16     </div>
17 </body>

当 div 增加 overflow:hidden; 时 效果如下

依据 BFC 布局规则第六条：

计算 BFC 的高度时，浮动元素的高度也参与计算。 
到此我们应该是解决了上面的所有疑问了。

 


__EOF__

本文作者：echo 丶若梦
本文链接：https://www.cnblogs.com/gaoht/p/9150176.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！