范仁义css3课程---22、float导致的父容器高度坍塌及解决

一、总结

一句话总结：

原因：浮动元素脱离文档流，使包含它的无高度样式的父容器感知不到其存在而发生内容无法撑开高度的现象

解决：增加一个空的块元素，清除浮动：clear:both;，让它把父元素撑开。

1、float布局导致的父容器高度坍塌的原因是什么？

浮动元素脱离文档流，使包含它的无高度样式的父容器感知不到其存在而发生内容无法撑开高度的现象

2、解决 float布局导致的父容器高度坍塌的最常见方法？

增加一个空的块元素，清除浮动：clear:both;，让它把父元素撑开。

二、float布局导致的父容器高度坍塌问题及其解决方法

博客对应课程的视频位置：22、float导致的父容器高度坍塌（一）
https://www.fanrenyi.com/video/10/59

转自或参考：float布局导致的父容器高度坍塌问题及其解决方法 - 简书
https://www.jianshu.com/p/89ced81bf0f1

a、父容器高度坍塌问题

导致的原因
浮动元素脱离文档流，使包含它的无高度样式的父容器感知不到其存在而发生内容无法撑开高度的现象
实例图：

浮动导致父容器高度坍塌

b、解决方案

1.给父容器设置高度样式(height)

缺点：只能适用于父容器高度固定的情况下，注定了这种方案很少用；

给父容器设置高度

2.因为浮动元素可以感知到浮动元素的存在，所以可以给父容器也设置浮动样式，使其感知到其内的浮动元素

缺点：给父容器设置了浮动样式后，父容器的父容器也会产生高度坍塌问题；

给父容器设置浮动

3.对父容器设置overflow: hidden/auto，触发其BFC

缺点：设置hidden会导致超出部分直接被隐藏，且不占据文档流位置，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。

比如相对定位的内容会被隐藏

设置overflow样式触发父容器BFC

4.使用伪类元素，再用伪类元素清除浮动

缺点：CSS代码量增多

设置伪元素清除浮动

PS：此法要注意的是，必须是after伪元素，且该伪类元素必须为block元素，原因是after伪元素在其父容器的其他标签的最后添加一个元素，渲染顺序排在了其父容器内部的最后，然后设置block元素是为了不让其它元素与其一排，再对其设置清除浮动，父容器自然就被这个after伪元素撑开了高度

5.使用块级标签撑开高度，此法和伪类法类似

缺点：增加了无意义的标签

设置标签清除浮动

三、课程代码

1.给父容器设置高度样式(height)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>float导致的父容器高度坍塌</title>
 6     <style>
 7         .box1{
 8             width: 300px;
 9             border: 5px solid red;
10             height: 150px;
11         }
12         .box2{
13             width: 100px;
14             height: 100px;
15             background-color: orange;
16             float: right;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box1">
22         <div class="box2"></div>
23 
24     </div>
25 </body>
26 </html>

View Code

2.父容器设置为浮动：因为浮动元素可以感知到浮动元素的存在，所以可以给父容器也设置浮动样式，使其感知到其内的浮动元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>float导致的父容器高度坍塌</title>
 6     <style>
 7         .box1{
 8             width: 300px;
 9             border: 5px solid red;
10             float: left;
11         }
12         .box2{
13             width: 100px;
14             height: 100px;
15             background-color: orange;
16             float: right;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box1">
22         <div class="box2"></div>
23     </div>
24 </body>
25 </html>

View Code

3.bfc方式：对父容器设置overflow: hidden/auto，触发其BFC

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>float导致的父容器高度坍塌</title>
 6     <style>
 7         .box1{
 8             width: 300px;
 9             border: 5px solid red;
10             overflow: auto;
11         }
12         .box2{
13             width: 100px;
14             height: 100px;
15             background-color: orange;
16             float: right;
17         }
18         .box3{
19             position: relative;
20             top: 250px;
21             left: 10px;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="box1">
27         <div class="box2"></div>
28         <div class="box3">缺点</div>
29     </div>
30 </body>
31 </html>

View Code

4.使用块级标签撑开高度，（为什么内联元素不行）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>float导致的父容器高度坍塌</title>
 6     <style>
 7         .box1{
 8             width: 300px;
 9             border: 5px solid red;
10         }
11         .box2{
12             width: 100px;
13             height: 100px;
14             background-color: orange;
15             float: right;
16         }
17         .box3{
18             clear: both;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="box1">
24         <div class="box2"></div>
25         <div class="box3"></div>
26     </div>
27 </body>
28 </html>

View Code

5.（放在父元素盒子上）使用伪类元素，再用伪类元素清除浮动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>float导致的父容器高度坍塌</title>
 6     <style>
 7         .box1{
 8             width: 300px;
 9             border: 5px solid red;
10         }
11         .box2{
12             width: 100px;
13             height: 100px;
14             background-color: orange;
15             float: right;
16         }
17         .box3{
18             clear: both;
19         }
20         .clearfix:after{
21             content: '';
22             display: block;
23             clear: both;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="box1 clearfix">
29         <div class="box2"></div>
30     </div>
31 </body>
32 </html>

View Code

6、float的最初目的：文字环绕

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .box1{
 8             width: 200px;
 9         }
10         .box2{
11             width: 100px;
12             height: 100px;
13             background-color: orange;
14             float: left;
15         }
16     </style>
17 </head>
18 <body>
19     <div class="box1">
20         <div class="box2"></div>
21         <div class="box3">浮动元素脱离文档流，使包含它的无高度样式的父容器感知不到其存在而发生内容无法撑开高度的现象</div>
22     </div>
23 </body>
24 </html>

View Code