DIV层内的元素在使用了float属性后无法自动改变高度的解决办法：有的时候为了让外侧层根据内容自动调整，没有设置高度或宽度，一般都会正常显示。但如果层内元素使用了float属性，就会使那些元素脱离文件流，就无法再扩充容器层，就会导致外层大小无法根据内容自动调整。关于这个问题，总结出以几种在当下几种主流浏览器都兼容的方法，供大家参考。1.清除浮动在层中的有浮动属性的元素最后边加上来清除 <</SPAN>divstyle="background:#eee;"><</SPAN>divstyle="height:100px;width:100px;background:Green; float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div>style="clear:both;">></</SPAN>div>2.将display设置为table一般来说，外层宽度都是固定的，设置宽度后可以将外层的显示模式设置为：display:table<</SPAN>divstyle="background:#eee; width:500px;display:table;"><</SPAN>divstyle="height:100px;width:100px;background:Green; float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div></</SPAN>div>3.添加overflow设置为hidden将外层的overflow设置为：hidden:<</SPAN>divstyle="background:#eee;overflow:hidden; "><</SPAN>divstyle="height:100px;width:100px;background:Green; float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div></</SPAN>div>
float属性
基本浮动规则
先来了解一下block元素和inline元素在文档流中的排列方式。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
示例代码：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 11 .r1{ 12 width: 300px; 13 height: 100px; 14 background-color: #7A77C8; 15 float: left; 16 } 17 .r2{ 18 width: 200px; 19 height: 200px; 20 background-color: wheat; 21 /*float: left;*/ 22 23 } 24 .r3{ 25 width: 100px; 26 height: 200px; 27 background-color: darkgreen; 28 float: left; 29 } 30 </style> 31</head> 32<body> 33 34<div class="r1"></div> 35<div class="r2"></div> 36<div class="r3"></div> 37 38 39 40</body> 41</html>
非完全脱离文档流
左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 11 .r1{ 12 width: 100px; 13 height: 100px; 14 background-color: #7A77C8; 15 float: left; 16 } 17 .r2{ 18 width: 200px; 19 height: 200px; 20 background-color: wheat; 21 22 } 23 </style> 24</head> 25<body> 26 27<div class="r1"></div> 28<div class="r2">region2</div> 29 30 31 32 33</body> 34</html>
>>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。
父级坍塌现象
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6<style type="text/css"> 7 * { 8 margin:0;padding:0; 9 } 10 .container{ 11 border:1px solid red;width:300px; 12 } 13 #box1{ 14 background-color:green;float:left;width:100px;height:100px; 15 } 16 #box2{ 17 background-color:deeppink; float:right;width:100px;height:100px; 18 } 19 #box3{ 20 background-color:pink;height:40px; 21 } 22</style> 23</head> 24<body> 25 26 <div class="container"> 27 <div id="box1">box1 向左浮动</div> 28 <div id="box2">box2 向右浮动</div> 29 </div> 30 <div id="box3">box3</div> 31</body> 32</body> 33</html>
例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。
>>>>解决方法：
1、固定高度
给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题。
或者给.container加一个固定高度的子div：
1<div class="container"> 2 <div id="box1">box1 向左浮动</div> 3 <div id="box2">box2 向右浮动</div> 4 <div id="empty" style="height: 100px"></div> 5</div> 6<div id="box3">box3</div>
但是这样限定固定高度会使页面操作不灵活，不推荐！
2、清除浮动(推荐)。
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 11 .r1{ 12 width: 300px; 13 height: 100px; 14 background-color: #7A77C8; 15 float: left; 16 } 17 .r2{ 18 width: 200px; 19 height: 200px; 20 background-color: wheat; 21 float: left; 22 clear: left; 23 24 } 25 .r3{ 26 width: 100px; 27 height: 200px; 28 background-color: darkgreen; 29 float: left; 30 } 31 </style> 32</head> 33<body> 34 35<div class="r1"></div> 36<div class="r2"></div> 37<div class="r3"></div> 38 39 40 41</body> 42</html>
把握住两点：1、元素是从上到下、从左到右依次加载的。
2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。
思考：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 11 .r1{ 12 width: 300px; 13 height: 100px; 14 background-color: #7A77C8; 15 float: left; 16 } 17 .r2{ 18 width: 200px; 19 height: 200px; 20 background-color: wheat; 21 float: left; 22 clear: both; 23 24 } 25 .r3{ 26 width: 100px; 27 height: 200px; 28 background-color: darkgreen; 29 float: left; 30 } 31 </style> 32</head> 33<body> 34 35<div class="r1"></div> 36<div class="r2"></div> 37<div class="r3"></div> 38 39 40 41</body> 42</html>
解决父级塌陷：
1''' 2 3 .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； 4 content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。 5 display: block; <----加入的这个元素转换为块级元素。 6 clear: both; <----清除左右两边浮动。 7 visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。 8 visibility:hidden;仍然占据空间，只是看不到而已； 9 line-height: 0; <----行高为0； 10 height: 0; <----高度为0； 11 font-size:0; <----字体大小为0； 12 } 13 14 .clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神 15 奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。 16 17 18整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 19之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。 20<div class="head clearfix"></div> 21 22'''
3、overflow:hidden
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。