14.浮动元素引起的问题和解决办法？

解决方法：

使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

清除浮动方法1：clear:both; 我们发现，有高度的盒子可以管住自己的儿子，但是如果父盒子没有高度，那么序列就乱套了，第二个序列就去追随第一个序列了：   解决办法挺简单，就是给后面的盒子加上 1 clear:both; clear就是清除意思，它的值可以是： clear:left;  表示清除左浮动带来的影响 clear:right; 表示清除右浮动带来的影响 clear:both；表示清除所有浮动带来的影响       这个东西不好用，原因是： 1） box还是没有高 2） margin失效   清除浮动方法2：隔墙 隔墙法是非常常用的，在网页中两个非常大的部分，我们总希望之间隔一堵墙，把两部分内部的浮动都关在里面，不要相互影响，小技巧就是margin依旧失效，可以用墙的高度来模拟间隔。 1  2  1 3  2 4  3 5  4 6  7  8  9  1 10  2 11  3 12    margin虽然失效，但是可以用小技巧来弥补，可以用墙的高来当做间隔。 但是盒子依然没有高。   3.6 清除浮动方法3：内墙法 cl就是clear:both; 1  2  1 3  2 4  3 5  4 6  7  8  9  10  1 11  2 12  3 13  14    现在margin好用了，并且盒子也有高了，所有的事情都解决了！但是还是有问题： HTML标签有点放置的太多了。这些标签页没有语义，看起来不爽。   清除浮动方法4：overflow:hidden;法 1    → 这个盒子没高，就写上overflow:hidden; 2  1 3  2 4  3 5  4 6  7  8    → 这个盒子没高，就写上overflow:hidden; 9  1 10  2 11  3 12  总结：记住，清除浮动的方法有很多，但是很多都是在面试中有意义。工作中： 1） 我们总喜欢给内部有浮动的父盒子加上overflow:hidden; 2)  我们总喜欢在两个大部分之间隔外墙 1  2  3  4  5  6  7  8  9  10  11    清除浮动方法5：伪类法，类似于内墙法   .box1{ width: 800px; border: 10px solid gray; margin-bottom: 20px; } .box2{ width: 800px; border: 10px solid gray; } .box1:after{display:block; height:0; content:""; clear:both;} .box2:after{display:block; height:0; content:""; clear:both;} p{ float: left; width: 100px; height: 60px; background-color: greenyellow; margin-right: 10px; }   这样做很好，父盒子有了高度，margin也有效了