狂神css视频笔记18课-父级边框塌陷问题解决

overflow以及父级边框塌陷的问题

第一点：父级边框塌陷的问题

看下面的这张图：

黑框表示的是，标准文档流。

四个元素都在黑框当中。

这个时候，我们让第一张图片向左浮动起来，是这样的代码：

浮动起来之后，得到的是下面的效果：

浮动起来之后，图片超出了标准文档流。

现在我们把四个元素，全部都浮动起来，两个向左，两个向右。

得到的就是这样的效果：

所有东西都浮动起来了，父级边框，也没有了。

但是父级边框不应该没有的。

我们可以让四个浮动的元素，按照标准文档流排版。

使用的属性是：clear

第二点：clear的值

clear有四个值，常用值，right、left、both、none。

right：右侧不允许有浮动，如果有的话，就按照标准文档流，排列到下面去。

left：同上，左侧不允许有浮动。

但是，我们一般都不用这两个。

both：两侧都不允许有浮动元素。

使用了clear之后，元素是浮动的，也是按照标准文档流，从上到下排列的，就好像，是一个，飘起来的，标准文档流。

使用了clear之后，还有一个问题，就是元素，依旧不在父元素内。

clear：none，就是不清除什么，可以浮动。

第三点：把浮动元素放在父级边框内，解决塌陷问题

最简单的方法，是把父级元素，设置一个高度，超过了浮动元素。就是增加父级元素高度。

很多网站，都这样做，但是，这种做法，非常low。

不建议使用这个。

第二种方法，增加一个空的div。这是一个标准的解决方法。

做完之后的效果是这样的：

还有第三种方法。这是新知识。

第四点：解决父级边框塌陷的第三种方法overflow

如上图，内容超过了高度，就产生一个滚动条，

这就是overflow的应用。

举个例子：

效果是这样的：

我们给内容添加一个div和高度。

在上面增加一个属性：overflow : scroll

就是下面的效果：

我们的文本超过了规定的高度之外，就可以使用overflow解决。

同样的思想，在浮动情况下，我们给父级元素，增加一个overflow，让自动溢出，就可以了。

为什么写hidden，因为父级元素没有高度。

高度是被内部元素撑起来的。

这样，就正常了：

第五点：解决父级边框塌陷的第四种解决方法

在父级元素添加一个伪类：:after。

这和第2种方法，是一样，避免页面添加空的div。

这是目前市面上最认可的方案。

效果如下：

这是最好的方式。

第六点：总结

第七点：display和float对比

display和float的用处：让元素放在一列。

display不可控制，float方向可以控制。

但是display不用管理父级边框塌陷的问题，但是float需要解决这个问题。

float浮动起来的时候，会脱离标准文档流，所以要解决父级边框塌陷的问题。

到了这里，浮动就学完了。

本篇守护佳丽-周知