码迷,mamicode.com
首页 > Web开发 > 详细

CSS float

时间:2018-10-24 20:08:36      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:分享图片   宽高   style   设置   containe   不能   order   idt   16px   

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>

 技术分享图片

 

CSS float

标签:分享图片   宽高   style   设置   containe   不能   order   idt   16px   

原文地址:https://www.cnblogs.com/qq254980080/p/9845048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!