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  <div class="box1"> 2  <p>1</p> 3  <p>2</p> 4  <p>3</p> 5  <p>4</p> 6  </div> 7 <div class="cl h20"></div> 8  <div class="box2"> 9  <p>1</p> 10  <p>2</p> 11  <p>3</p> 12  </div>   margin虽然失效，但是可以用小技巧来弥补，可以用墙的高来当做间隔。 但是盒子依然没有高。   3.6 清除浮动方法3：内墙法 cl就是clear:both; 1  <div class="box1"> 2  <p>1</p> 3  <p>2</p> 4  <p>3</p> 5  <p>4</p> 6  <div class="cl"></div> 7  </div> 8  9  <div class="box2"> 10  <p>1</p> 11  <p>2</p> 12  <p>3</p> 13  <div class="cl"></div> 14  </div>   现在margin好用了，并且盒子也有高了，所有的事情都解决了！但是还是有问题： HTML标签有点放置的太多了。这些标签页没有语义，看起来不爽。   清除浮动方法4：overflow:hidden;法 1  <div class="box1">  → 这个盒子没高，就写上overflow:hidden; 2  <p>1</p> 3  <p>2</p> 4  <p>3</p> 5  <p>4</p> 6  </div> 7  8  <div class="box2">  → 这个盒子没高，就写上overflow:hidden; 9  <p>1</p> 10  <p>2</p> 11  <p>3</p> 12  </div> 总结：记住，清除浮动的方法有很多，但是很多都是在面试中有意义。工作中： 1） 我们总喜欢给内部有浮动的父盒子加上overflow:hidden; 2)  我们总喜欢在两个大部分之间隔外墙 1 <div class="header"> 2  3 </div> 4 <div class="cl h18"></div> 5 <div class="content"> 6  7 </div> 8 <div class="cl h18"></div> 9 <div class="footer"> 10  11 </div>   清除浮动方法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也有效了