广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

清除浮动的原理和方法

发布时间:2017-07-29 发布作者:老直营威尼斯网址开户 查阅次数:1699次 标签:广州网站建造

小case的由来:


在CSS规范中,浮动定位是脱离圆素正常流的。以是,只要含有浮动圆素的父容器,在显示时不揣摩子圆素的地位,就当它们不存在一样。这就遭成了显示出来,父容器好像空容器一样。


譬喻下面代码:


1 <div class="box">

2     <div style="float:left;width:100px;height:100px;"></div>

3     <div style="float:right;width:100px;height:100px"></div>

4 </div>

在浏览器中一运行,实际视图是子圆素显示在父容器的外部。


解决方法一:添加空圆素


在浮动圆素下面添加一个非浮动的圆素


代码如下:


复制代码

 1 <div class="box">

 2   <div style="float:left;width:100px;height:100px;"></div>

 3   <div style="float:right;width:100px;height:100px;"></div>

 4   <div class="clearfix"></div>

 5 </div>

 6 

 7 <style>

 8 .clearfix{

 9     clear:both;

10 }

11 </style>

复制代码

解决方法二:浮动的父容器


将父容器也改成浮动定位,这样它就可以带着子圆素一起浮动了


代码如下:


复制代码

 1 <div class="box">

 2     <div style="float:left;width:100px;height:100px;"></div>

 3     <div style="float:right;width:100px;height:100px;"></div>

 4 </div>

 5 

 6 <style>

 7 .box{

 8     float:left;

 9 }

10 </style>

复制代码

解决方法三:浮动圆素的自动clearing


让父容器变得可以自动"清理"(clearing)子圆素的浮动,易于 能够识别出浮动子圆素的地位,不会出现显示上的差错。


代码如下:


复制代码

 1 <div class="box">

 2   <div style="float:left;width:100px;height:100px;"></div>

 3   <div style="float:right;width:100px;height:100px;"></div>

 4 </div>

 5 

 6 <style>

 7 .box{

 8     overflow:hidden;

 9 }

10 </style>

复制代码

解决方法四:通过CSS语句添加子圆素,这样就不用修改HTML代码


就是用after伪圆素的方法在容器尾部自动创建一个圆素的方法


代码如下:


复制代码

 1 <div class="box">

 2   <div style="float:left;width:100px;height:100px;"></div>

 3   <div style="float:right;width:100px;height:100px;"></div>

 4 </div>

 5 

 6 <style>

 7 .box:after {

 8     content: "\0020";

 9     display: block;

10     height: 0;

11     clear: both;

12     zoom:1;

13 }

14 </style>

再谈软件测试人员的发展方向

MySQL创始人:写代码比打游戏还爽,程序员应该多泡开源社区

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图