实用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四种清除浮动的方法

浮动能让元素脱标,但是不同区域的标签之间却又会贴边,比如: Document ...
  • Jeff169
  • Jeff169
  • 2016年12月07日 16:33
  • 606

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

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...
  • promiseCao
  • promiseCao
  • 2016年10月09日 23:04
  • 15427

CSS清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

CSS清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法  浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别...
  • sinat_36533893
  • sinat_36533893
  • 2017年04月08日 14:35
  • 569

CSS清除浮动的几种方法

浮动的几个重要性质首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动...
  • u011342403
  • u011342403
  • 2017年04月24日 06:49
  • 807

CSS—清除浮动的几种方式

什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版。浮动只有左右浮动。 2--浮动元素A的位置与上一个元素有关系。如果上一个元素有浮动,则A的顶...
  • nongweiyilady
  • nongweiyilady
  • 2016年12月26日 17:11
  • 2511

CSS清除浮动的五种方式

浮动元素会影响整体的布局,但是有些情况又不得不让元素浮动来更好的构成页面,下面整理五种常用的清楚浮动的方法: (注:为了节省时间,将方法写在了class名内,看懂即可) 1,为父元素添加高度: ...
  • Manson_zh
  • Manson_zh
  • 2017年07月04日 15:33
  • 317

Html+CSS CSS(CSS3) 3种清除浮动的方法

应用DivCSS网页布局,经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。 下面看今天的...
  • u010003835
  • u010003835
  • 2016年03月22日 16:39
  • 1505

总结清除浮动方法大全(7种)

1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 ,其他标签br等亦可。 再如: 1)添加额外标签 .main{float:left;} ...
  • u011263845
  • u011263845
  • 2015年04月24日 16:14
  • 982

css 伪元素 伪类 使用 万能清除浮动 ..

参考 http://blog.jobbole.com/49173/ css 伪元素即插入的虚伪元素 像:before :after 插入元素 css 伪类 就是 操作class 样式 ...
  • java_goodstudy
  • java_goodstudy
  • 2016年12月20日 03:24
  • 4280

css清除浮动带来的负面影响

来看一个实验:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。 1  2  3  HTML 4 CSS 5 JS 6 HTML5 ...
  • tugangkai
  • tugangkai
  • 2017年01月16日 23:06
  • 806
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实用css技巧——清除浮动方法总结
举报原因:
原因补充:

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