妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动
来看下例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; } .div { width: 200px; height: 200px; background: red; float: left; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html
运行效果图：
可见，父级元素<div class="box"></div>并没有包裹住子集元素<div class="div"></div>
接下来我们讲解怎么清浮动?
①给父级也加浮动，如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; float: left; } .div { width: 200px; height: 200px; background: red; float: left; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
运行效果如下图：
发现问题：页面中所有元素都要加浮动，margin左右自动失效（floats bad ！），所以此方法不建议使用。
②给父级加display: inline-block;，不脱离文档流(应该是不让子集元素脱离文档流)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; display: inline-block; } .div { width: 200px; height: 200px; background: red; float: left; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
运行效果图如下：
发现问题：margin左右自动失效。
③在浮动元素下加<div class="clear"></div>，在添加如下样式：.clear { height: 0px; clear: both; font-size: 0; }，但在IE6下还有问题！到底是什么问题呢?我在后面会讲，现在又接触了一个新的属性——clear
clear属性有如下值：
- right
- left
- both
- none
- inherit
clear是指元素的某个方向上不能有浮动元素，而clear: both是指元素左右两侧均不允许有浮动元素。了解以上知识后，来看一个示例：
1、当clear为right时，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { font-size: 20px; } .box1 { width: 100px; height: 100px; background: red; float: left; } .box2 { width: 200px; height: 200px; background: blue; clear: right; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> </html>
从上图可看出元素<div class="box2">box2</div>才不会管你左边有没有浮动元素呢，它只管它右边有没有浮动元素。
2、当clear为left时，代码略过，直接看运行效果图：
同上，不赘述。
3、当clear为both，同上，不赘述。
至此，我们来看第③方法怎么清浮动。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; } .div { width: 200px; height: 200px; background: red; float: left; } .clear { height: 0px; clear: both; font-size: 0; } </style> </head> <body> <div class="box"> <div class="div"></div> <div class="clear"></div> </div> </body> </html>
我们说过此方法在IE6下还有问题！到底是什么问题呢?来看IE6下最小高度问题。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { margin: 0; background: #000; } .box { height: 5px; background: red; font-size: 0; } /* 在IE6下高度小于19px的元素，高度会被当作19px处理 解决办法：font-size: 0; 但font-size只能处理最小2个像素的高度 */ </style> </head> <body> <div class="box"></div> </body> </html>
在chrome浏览器中是没有任何问题的，但在IE6下有问题，在IE6下高度小于19px的元素，高度会被当作19px处理。解决办法：font-size: 0，但font-size只能处理最小2个像素的高度(也即解决后IE6下还有2px偏差，怎么解决呢?也是一个疑问)。
④在浮动元素下加<br clear="all" /> clear: left/right/all(both)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; /*display: inline-block;/* 不脱离文档流 */ } .div { width: 200px; height: 200px; background: red; float: left; } </style> </head> <body> <div class="box"> <div class="div"></div> <br clear="all" /> </div> </body> </html>
发现问题：不符合工作中：结构、样式、行为，三者分离的要求。
在讲解第⑤种方法时，我们需要了解几个概念。
1、after伪类，如下例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p { width: 200px; border: 1px solid #000; } p:after { content: "!!!!!!!!"; background: red; display: block; width: 100px; height: 100px; } </style> </head> <body> <p>妙味课堂</p> </body> </html>
after伪类：元素内部末尾添加内容。语法：
:after{content"添加的内容";}
注意：在IE6、7下是不兼容的！
2、haslayout
haslayout是Windows Internet Explorer渲染引擎(?)的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了haslayout的属性，属性值可以为true或false。当一个元素的haslayout属性值为true时，我们说这个元素有一个布局（layout）。
所以，haslayout根据元素内容的大小，或者父级的大小来重新计算元素的宽高。
就目前所学来说，使用以下样式可以触发IE下haslayout=true。
| display | inline-block |
| height | (任何值除了auto) |
| float | (left或right) |
| width | 任何值除了auto |
| zoom | 除normal外任意值 |
3、zoom，缩放
zoom: 1;时，保持原样
zoom: 2;时，放大到2倍
zoom: 0.5;时，缩小到一半
最后，来看第⑤种方法怎么清浮动。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; } .div { width: 200px; height: 200px; background: red; float: left; } .clear:after { content: ""; display: block; clear: both;/* 只有在块元素有效，但在IE6、7下不支持after伪类 */ } </style> </head> <body> <div class="box clear"> <div class="div"></div> </div> </body> </html>
注意：clear属性只有在块元素时才有效。
发现在IE6、7下也无任何异常，因为在IE6、7下浮动元素的父级有宽度(width)，就不用清浮动。但是没有设置width时，怎么办，这是可以使用zoom属性。如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { margin: 0 auto; border: 10px solid #000; } .div { width: 200px; height: 200px; background: red; float: left; } .clear { zoom: 1; } .clear:after { content: ""; display: block; clear: both;/* 只有在块元素有效，但在IE6、7下不支持after伪类 */ } </style> </head> <body> <div class="box clear"> <div class="div"></div> </div> </body> </html>
所以，⑤给浮动元素父级加{ zoom: 1;}，:after { content: ""; display: block; clear: both; }，此方法是目前最常用的清浮动的方法。
接下来，来讲解第⑥种清浮动的方法，不过我们首先要了解overflow(溢出)属性。
overflow属性值有：
- auto，溢出显示滚动条
- scroll，默认就显示滚动条
- hidden，溢出隐藏
举例来说明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; height: 300px; border: 1px solid #000; font-size: 12px; line-height: 30px; overflow: auto; } h3 { width: 100px; height: 30px; background: red; margin: 0; } </style> </head> <body> <div class="box"> haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout） 要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。 </div> <h3>妙味课堂</h3> </body> </html>
当overflow为auto，内容溢出，显示滚动条。
当overflow为scroll，默认就显示滚动条。
当overflow为hidden，内容溢出隐藏。
当不使用overflow时，内容溢出，就会成这个鸟样：
再看下例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; height: 300px; border: 1px solid #000; overflow: auto;/* 证明可以包着浮动元素 */ } .div1 { width: 260px; height: 400px; background: red; float: left; } </style> </head> <body> <div class="box"> <div class="div1"></div> </div> </body> </html>
可以看出，使用overflow属性的父级元素可以包着浮动元素。
所以，第⑥种清浮动的方法为：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; margin: 0 auto; border: 10px solid #000; overflow: auto/hidden; } .div { width: 200px; height: 200px; background: red; float: left; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
配合width兼容IE6、7。
但是，更常用的是配合zoom兼容IE6、7。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { margin: 0 auto; border: 10px solid #000; overflow: auto/hidden; zoom: 1; } .div { width: 200px; height: 200px; background: red; float: left; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>
至此，第⑥种清浮动的方法：给浮动元素的父级加overflow: auto/hidden; 一定要配合zoom: 1;。
