最近学习了float这个属性,float可以让元素浮动起来,浮动起来的元素脱离原来的排列层面(未完全脱离文档流),处于上方。float的确让元素的布局变得简单,但是也同样给浮动起来的元素地父级带来一些问题。子级元素浮动起来后,不再默认继承父级的宽高,而父级也检测不到子级的内容。
解决这个问题的方法就是给父级清除浮动。
(1)给父级手动添加高度
(2)给父级添加overflow:hidden
(3)给浮动的元素添加一个同级的标签,在标签内写clear:both;
(4)给父级添加一个after的伪类,在父级:after内写{
content:".";
visibility:hidden;
display:block;
clear:both;}