浮动布局--如何解决父元素高度为0以及原理

太久没有写css了,现在来回顾一下CSS布局和总结一下当使用浮动元素导致父元素坍塌的解决方法哦~~~
如果我们不采取任何的方式，直接使用浮动元素会是这样的

那为什么背景颜色没有显示出来呢，很简单，就是因为浮动元素在正常的文档流中是不占位置的，所以自然对于父元素来说，子元素就像不存在它的容器内，那自然就没有高度拉！
这时候父元素的高度为0;

于是解决方法

1.使父元素也为浮动元素

.content {    float: left;    width:90%}

看看效果，现在背景就出来了

缺点：
会影响后面的布局，比如下面的<footer>元素，就会忽视这个div然后跑到上面去了,细心的同学可能就会发现了，为什么图二的底部不会跑上去呢，而下图的底部就跑上去了呢，原因是图二的有文字的原因，文字会使环绕着浮动元素，所以就没有跑上去了，而下面的图中只设置了高度和宽度，所以就被遮挡住拉！
可以给footer加上clear: both,让他清除浮动哦

2.使用overflow:hidden

.content {    background-color:#cddc39;    overflow: hidden;    width:100%;}

效果和第一种是一样的，但是，下面的footer就不用再加上清除浮动的属性就安安稳稳地在那里拉～
我刚查到这种解决方法的时候也不是很懂为什么这样父元素就可以有了高度；这个和ＢＦＣ（块级格式化上下文）有关；下面再详写
在Ｗ３Ｃ的标准中，对于overflow是这样的：
overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值：内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。就是说子元素大于父元素的宽度和高度，父元素也会自动忽略，按照父元素的大小去显示
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。加了该属性之后就会有滚动条出现
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。就是说子元素大于父元素的宽度和高度，按照父元素的大小去显示，但是会加滚动条来详细查看子元素的
inherit 规定应该从父元素继承 overflow 属性的值。

所以自然而然也就暴露他的缺点了，如果是带有定位元素的子元素，这样子元素就会被裁剪掉了。

把<asize>元素改了

position: absolute;top: -30px;

之后，可见asize元素里面的文字内容就被裁剪掉了，所以使用overflow属性要考虑定位元素.

3.在父元素中添加一个空标签，然后再设clear:both属性
曾经纠结为什么这种方法父元素会得到高度，看看w3c对clear属性的解释

定义：
clear 属性规定元素的哪一侧不允许其他浮动元素。

说明：
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

所以说，当增加了一个空标签后，会在这个元素的外边距之上添加了清除空间，而外边距本身并不改变。可以想象添加了空行标签之类的，但是我们并没有看到标签的存在，就像被设置了隐藏属性一样，所以父元素就自然有高度了。
效果图和1,2方法是一样的，
缺点是如果要为此添加一些无用的标签，整个文档结构可能会变得很混乱哦

4.其实和３方法原理是一样的，只不过是用伪类的方法去实现~~

.content:after{    display: block; //设置为块级元素，如果是行内元素，则不起作用    clear: both; //清除浮动    content: '.'; //内容随便拉拉    visibility: hidden; //设置为隐藏    height: 0; }

源代码：https://github.com/fishlao/css-practise