实用css技巧——清除浮动方法总结

原创 2016年06月01日 08:31:38

相信不少跟我一样的前端新手在利用float浮动来进行页面的布局和定位时都会遇到这样的问题:一旦当前浮动元素的父级div不设置固定的高度height时,浮动的元素无法将父级div的内容撑开。导致整个页面的布局都乱了。究其原因竟是因为没有“清除浮动”。因为之前在实际项目开发中就遇到过这个问题,给自己造成了不少的困扰。现在想把自己用到的清除浮动的方法跟大家分享下,菜鸟学飞,总结得不全面还请各位大牛多多指教。

1)添加额外标签

在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可。

 <div class="wrap" id="float1">

<h2>添加额外标签</h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

<div style="clear:both;"></div>

</div>

<div class="footer">.footer</div>

2)父元素设置 overflow:hidden/overflow:auto,具体示例代码如下:

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">

<h2>父元素设置 overflow </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>

<div class="footer">.footer</div>

3)父元素设置display:table

4)使用:before,:after 伪元素(个人比较推荐

该方法通过在浮动元素的父级元素上添加一个具有清除浮动功能的类来实现清除浮动效果:

.clearfix:before,.clearfix:after{display:table;content:"";}

.clearfix:after{clear:both;}

<div class="wrap  clearfix" id="float3" >

<h2>父元素设置 添加类clearfix </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>


注:菜鸟对于文字语言的把握可能不大好,表达的意思大家懂就好,另外附件一份自己此前看过得大牛关于清除浮动的讲解,有兴趣的童鞋可以下载下来看看。



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS清除浮动方法总结

一、 分析HTML代码结构: 1 2 3 分析CSS代码样式:.outer{border: 1px solid #ccc;background: #fc9;color: ...

css中清除浮动展开父元素的几种方法总结

最近在瀑布流布局的学习中,发现css中浮动会使html元素脱离文档流,导致在浮动元素的父元素无法展开(即其父元素高度为0),后面的元素挤占原本浮动元素在文档流中的位置,造成令人意外的布局

css 清除元素的浮动方法总结

css 清除元素的浮动方法总结

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...

CSS技巧(一):清除浮动

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内...

css float 关于清除浮动的四个技巧

在没有清除之前是这样的 这个绿色的被红色的覆盖了 所以看不到 这就是浮动带来的结果 清除浮动方法一 就是在随后的标签上增加clear:both 但是会增加无意义的标签 方法二 用after元素...

css技巧:清除浮动

从我开始写页面的那一刻起,我就发现了用左右浮动这个属性时,经常就会发现父元素不见了,没有想象中那样支撑起来包裹住里面的元素,后来通过网上查找,才知道原来这就是为什么需要清除浮动了。什么是CSS清除浮动...

css中3种清除浮动方法

CSS清除浮动的几种方法

浮动的几个重要性质首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)