浮動(dòng)的問題
什么是浮動(dòng)汗茄？
浮動(dòng)（float）的副作用
清除浮動(dòng)
兩種清除浮動(dòng)的辦法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第二種清除浮動(dòng)的辦法-->
<style type="text/css">
.content:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.content {
zoom: 1;
}
/*"clearfix"是父容器的class名稱揪利，"content:"020";"是在父容器的結(jié)尾處放一個(gè)空白字符肪虎，"height: 0;"是讓這個(gè)這個(gè)空白字符不顯示出來泼各，"display: block; clear: both;"是確保這個(gè)空白字符是非浮動(dòng)的獨(dú)立區(qū)塊。
但是煞烫，:after選擇符IE 6不支持昼窗，也就是說上面的這段代碼在IE 6中無效，這怎么辦敷燎？
我們添加一條IE 6的獨(dú)有命令"zoom:1;"就行了暂筝，這條命令的作用是激活父元素的"hasLayout"屬性，讓父元素?fù)碛凶约旱牟季中柑尽E 6會(huì)讀取這條命令乖杠，其他瀏覽器則會(huì)直接忽略它。*/
</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>
<!--第一種清除浮動(dòng)的辦法-->
<!--<div style="clear:both;"></div>-->
</div>
<div style="background-color: greenyellow">333</div>
</body>
</html>
