首页所有案例网站建设微信公众号开发电商视觉APP开发网络营销公司最新联系咨询

清除浮动的原理和方法

2017年10月19日

问题的由来:

在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: "020";

 9     display: block;

10     height: 0;

11     clear: both;

12     zoom:1;

13 }

14 </style>


本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

标签: 网站设计公司 、 网站建设公司 、 网站制作 、 网站设计 、 网站建设 、 广州网站设计公 司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作

填写服务需求或选择下列套餐服务。

 创业版建站套餐 9800 经典版建站套餐 18000 豪华版建站套餐 26000> 微商城个性版 28000>

* 服务套餐价格会不定时变化,请认真填写需求信息,我们会在24小时内与您取得联系。

网站建设套餐

创业版9800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
1个初稿方案(可修改1次)
15个工作日
金牌1对1服务(不接受面谈)
服务内容
1.5个页面设计,3屏=1页.
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.留言管理系统
6.在线客服
赠送内容
1.免费维护1年
2.SEO关键词设置
3.第三方流量统计

网站建设套餐

经典版18000元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
2个初稿方案(可修改2次)
20个工作日
金牌1对1全程上门服务
服务内容
1.10个页面设计,3屏=1页.
2.H5动效设计
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.招聘管理系统
6.留言管理系统
7.在线客服
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.1000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词设置
7.第三方流量统计

网站建设套餐

豪华版26000元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
高级设计+高级前端+高级程序
3个初稿方案(可修改5次)
30个工作日
金牌1对1全程上门服务
服务内容
1.20个页面设计,3屏=1页.
2.H5动效设计
3.后台管理系统
4.新闻管理系统
5.产品管理系统
6.招聘管理系统
7.留言管理系统
8.基础会员功能
9.在线客服
10.第三方插件接入
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词优化指导
7.SEO关键词设置
8.第三方流量统计

微信商城套餐

微商城个性版 28000

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
永久版微商城
高级设计+高级前端+高级程序
2个初稿方案
35个工作日
金牌1对1全程上门服务
服务内容
1.整套UI设计
2.会员管理
3.商品管理
4.订单管理
5.内容管理
6.广告管理
7.促销管理
8.报表统计
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.第三方流量统计
线上服务咨询020-82352603填写需求索取报价