子元素浮动导致父元素坍塌的原因和规避方法以及Position定位的使用

子元素浮动导致父元素坍塌的原因和规避方法

解决以下问题就可以知道答案了

1什么是浮动？

2子元素浮动导致父元素坍塌的原因？

3清除浮动有哪些方法（规避方法）?

1浮动是什么？

浮动使元素脱离文档普通流，漂浮在普通流之上的。

（需要知道html元素在普通流排列方式：元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。）

说简单点：就如上面的图中div1，div2，div3，div4都是我们一般情况的显示，div5就是float：left向左浮动，所以可以看到div5是向左了的，正因为div5向左移动了，所以div5空出来的位置就由div6顶上

2子元素浮动导致父元素坍塌的原因

浮动导致元素已不在普通流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框包不住浮动元素，即所谓的“高度塌陷”。

3浮动有哪些方法?

1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。

2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。

3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。

4、给父元素添加 overflow：hidden；

5、通过伪类::after清除浮动

6、使用display:
inline-block

给父元素设置这个属性，浮动可以解决，唯一缺点就是margin: 0 auto失效了。

7，br属性clear

因为br自带clear属性，所以使用它可以解决浮动。这跟添加空标签一样，多了很多无用标签，也不推荐。

例子：



出现包含框包不住浮动元素：

1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。

2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。

3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的：

4、给父元素添加 overflow：hidden；这个方法唯一的缺点就是超出父元素的会被隐藏。

5、通过伪类::after清除浮动：这是比较推荐的方法（先定义一个clearfix类，在css中增加.clearfix:after里面添加content:放一个句号”.”display设为block；高度设为0；clear设为both；visibility设为hidden

overflow设为hidden，这样就可以撑开容器了。）

6、使用display:
inline-block

给父元素设置这个属性，浮动可以解决，唯一缺点就是margin: 0 auto失效了。

7，br属性clear

因为br自带clear属性，所以使用它可以解决浮动。这跟添加空标签一样，多了很多无用标签，也不推荐。

1~7方法修改后的结果都为：

Position定位的使用

Position的取值方式：

1．static ：无特殊定位；

2.relative：（对象遵循正常文档流）：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置；

3.absolute：（对象脱离正常文档流）将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位；

（1）我准备利用position定位来制作左图右字的（作为例子）：

首先是一般书写的：

显示结果：

（2）接着我先用float使图片和文字左右分布：

代码运行结果：

（3）显然这样看这个图文并不是很好看，因此我们可以用position去使文字在图片的右边的中间，因此我们就用先用position：relative；top：45px

但是结果并不是我们想要的（position：relative对象遵循正常文档流。所以可能是由于前面我们使用的text-align：right使得文字靠右）：

（4）同样我们也可以用position来使文字向左靠：

修改如下：
在这里插入图片描述
（3）同样我们可以用position：absolute；top：45px

同样也不是我们想要的结果（position：absolute对象脱离正常文档流。所以文字就固定在原位置下部的45px）：

（4）同样我们也可以用position来使文字向右靠：

修改如下：