实用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>


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



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

相关文章推荐

菜鸟备忘录[CSS3]——清除浮动的四种方法

在刷掘金的时候看到了这篇不错(写给小白)的文章:传送门文章中提到了清除浮动,于是就想起之前学CSS时候被浮动搞的叫苦连篇,于是在此引用网上其他大神总结的方案写个备忘录。一、什么是浮动,为什么要清除浮动...

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行...

CSS清除浮动方法总结

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

css清除浮动float的三种方法总结

摘要 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一、抛一块问题砖(display: block)先看现象:     分析HTML代码结构:...

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

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

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

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

css清除浮动float的三种方法总结

一、抛一块问题砖(display: block)先看现象:     分析HTML代码结构: div class="outer">     div class="div1">1div>     ...
  • judyge
  • judyge
  • 2016年06月30日 20:51
  • 245

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

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

css清除浮动float的三种方法总结

一、抛一块问题砖(display: block)先看现象:     分析HTML代码结构: div class="outer">     div class="div1">1div>     ...

CSS技巧(一):清除浮动

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内...
  • hl32199
  • hl32199
  • 2015年04月01日 11:30
  • 101
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实用css技巧——清除浮动方法总结
举报原因:
原因补充:

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