css清除浮动的处理方法
根据《精彩绝伦的css》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.news{
outline:1px solid pink
}
.col{
float: left;
33%;
outline:1px solid blue;
}
</style>
</head>
<body>
<div class="news">
<div class='col one'><p>some text-one</p></div>
<div class='col two'><p>ConHugeCo has permanently altered the theory of niches. What do we morph? Anything and everything, regardless of namelessness!</p></div>
<div class='col three'><p>some text-three</p></div>
</div>
</body>
</html>//这里出现的为图<1>
清除浮动的方法：
- 以溢出遏制浮动 --最终展示效果图<2>
.news{
Overflow : auto;
}
好处：简单
劣势：浏览器自动回添加滚动条
2.以浮动遏制浮动 --出现的问题图<3>
.news{
Float: left;
}
劣势：浮动层的宽度不定，后面的元素会受到这个元素的影响
<div class=’ news >…</div>
<div id=’footer’>2015 comany</div>
出现这个问题：
解决办法：
.footer{
Clear : both;
}
Width:100% //解决宽度不定，不能用auto,div层是浮动层
3. 清除浮动 --图<4>
<div class=’ news >
….
<br>
<p> 2015 company</p>
</div>
添加<br>
br{
Clear ： both;
}
4.相邻清除
上面那个例子还有个解决办法
.col.three + *{ clear:both;
}