CSS float

float脱离文档流，浮动在其他元素之上

float后会变成一个块级元素（可设置宽高），宽度自动调整为元素中内容的宽度

a1没有float

<style type="text/css">
.a1{background-color:rgba(0,187,255,0.5);}
.a2{background-color:rgba(255,0,0,0.5); padding-top:50px;}
</style>

<div class="a1">11111111</div>
<div class="a2">22222222</div>

a1float后

<style type="text/css">
.a1{background-color:rgba(0,187,255,0.5); float:left;}
.a2{background-color:rgba(255,0,0,0.5); padding-top:50px;}
</style>

<div class="a1">11111111</div>
<div class="a2">22222222</div>

<style type="text/css">
img { float:right;}
.container{ border: 1px solid #000;}
.clear{clear: both;}
</style>

<div class="container">
111111
<img src="/i/eg_smile.gif" />
</div>

显示结果：

图片浮动之后，container高度只剩下“111111”文字的高度，container不能被img撑开了

要想撑开container，要么清除浮动，要么叫container也浮动

1、清除浮动

<style type="text/css">
img{ float:right;}
.container{ border: 1px solid #000;}
.clear{ clear: both;}
</style>

<div class="container">
111111
<img src="/i/eg_smile.gif" />
<div class="clear"></div>
</div>

2、container也浮动，宽度100%

<style type="text/css">
img{ float:right;}
.container{ border: 1px solid #000; float: left; width: 100%;}
.clear{ clear: both;}
</style>
<div class="container">
111111
<img src="/i/eg_smile.gif" />
</div>

猜你喜欢