浮动的问题
什么是浮动？
浮动（float）的副作用
清除浮动
两种清除浮动的办法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第二种清除浮动的办法-->
<style type="text/css">
.content:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.content {
zoom: 1;
}
/*"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。*/
</style>
</head>
<body>
<div class="content" style="background-color: red">
<div style="float:left;width:25%; background-color: #337ab7">111</div>
<div style="float:right;width:45%; background-color: blueviolet">222</div>
<!--第一种清除浮动的办法-->
<!--<div style="clear:both;"></div>-->
</div>
<div style="background-color: greenyellow">333</div>
</body>
</html>
网友评论