妙味课堂——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

运行效果图:

妙味课堂——HTML+CSS(第四课)(二)

可见,父级元素<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>

运行效果如下图:

妙味课堂——HTML+CSS(第四课)(二)

发现问题:页面中所有元素都要加浮动,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>

运行效果图如下:

妙味课堂——HTML+CSS(第四课)(二)

发现问题:margin左右自动失效。

③在浮动元素下加<div class="clear"></div>,在添加如下样式:.clear { height: 0px; clear: both; font-size: 0; },但在IE6下还有问题!到底是什么问题呢?我在后面会讲,现在又接触了一个新的属性——clear

clear属性有如下值:

  1. right
  2. left
  3. both
  4. none
  5. 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>

妙味课堂——HTML+CSS(第四课)(二)

从上图可看出元素<div class="box2">box2</div>才不会管你左边有没有浮动元素呢,它只管它右边有没有浮动元素。

2、当clear为left时,代码略过,直接看运行效果图:

妙味课堂——HTML+CSS(第四课)(二)

同上,不赘述。

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>

妙味课堂——HTML+CSS(第四课)(二)

我们说过此方法在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>

妙味课堂——HTML+CSS(第四课)(二)

发现问题:不符合工作中:结构、样式、行为,三者分离的要求。

在讲解第⑤种方法时,我们需要了解几个概念。

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>

妙味课堂——HTML+CSS(第四课)(二)

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属性只有在块元素时才有效。

妙味课堂——HTML+CSS(第四课)(二)

发现在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:;
}
.clear:after {
content: "";
display: block;
clear: both;/* 只有在块元素有效,但在IE6、7下不支持after伪类 */
}
</style>
</head>
<body>
<div class="box clear">
<div class="div"></div>
</div>
</body>
</html>

妙味课堂——HTML+CSS(第四课)(二)

所以,⑤给浮动元素父级加{ zoom: 1;},:after { content: ""; display: block; clear: both; },此方法是目前最常用的清浮动的方法。

接下来,来讲解第⑥种清浮动的方法,不过我们首先要了解overflow(溢出)属性。

overflow属性值有:

  1. auto,溢出显示滚动条
  2. scroll,默认就显示滚动条
  3. 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,内容溢出,显示滚动条。

妙味课堂——HTML+CSS(第四课)(二)

当overflow为scroll,默认就显示滚动条。

妙味课堂——HTML+CSS(第四课)(二)

当overflow为hidden,内容溢出隐藏。

妙味课堂——HTML+CSS(第四课)(二)

当不使用overflow时,内容溢出,就会成这个鸟样:

妙味课堂——HTML+CSS(第四课)(二)

再看下例:

<!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>

妙味课堂——HTML+CSS(第四课)(二)

可以看出,使用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。

妙味课堂——HTML+CSS(第四课)(二)

但是,更常用的是配合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>

妙味课堂——HTML+CSS(第四课)(二)

至此,第⑥种清浮动的方法:给浮动元素的父级加overflow: auto/hidden; 一定要配合zoom: 1;。

上一篇:Malware Defender(HIPS主动防御软件) V2.8 免费版


下一篇:●BZOJ 1797 [Ahoi2009]Mincut 最小割