CSS理解之Float

1.Float的设计初衷仅仅是:

实现文字环绕效果,如下图所示:

Paste_Image.png

明白了float的设计初衷,就可以明白float特有的行为表现了。

我们都知道,使用float会产生一定的破坏性,如给子元素设置浮动会使父元素高度塌陷,其实这不是bug,而是为了实现文字环绕效果而产生的特性使然。

2.清除浮动的两大基本方法:

1.给受浮动影响的元素设置clear:both

2.使父元素形成BFC(IE8+,是高级浏览器特有的一个概念)或haslayout(IE6/IE7私有的概念)

两种方法的区别:

  1. clear:与外界还有联系,例如会产生margin重叠的效果
  2. BFC/haslayout(应用于父元素):封闭,里面的声明不会对外界产生影响,例如float不会出现margin重叠,但也有缺陷,无法应用于所有浏览器

代码示例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clear与margin重叠</title>
</head>

<body>
1.
<div style="background-color: #f5f5f5;">
    ![](http://upload-images.jianshu.io/upload_images/1969310-8b6611e56974ea20.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <div style="clear:both; margin-bottom:100px;">clear:both;</div>
</div>
<div style="margin-top: 100px;">本文字离图片的距离是?</div>
<br><br><br><br>2.
<div style="background-color: #f5f5f5; overflow: hidden;">
    ![](http://upload-images.jianshu.io/upload_images/1969310-8b6611e56974ea20.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
<div style="margin-top: 100px;">本文字离图片的距离是?</div>
</body>
</html>

显示效果:

Paste_Image.png

第一种:浮动元素的底加入div 且设置clear:both;(本例中margin-top和margin-bottom会发生重叠)

第二种:在浮动元素的父元素上加入overflow: hidden,使父元素形成BFC;(本列中 父元素会将整个元素包裹起来,从而不会出现塌陷和重叠显现)

clear的通常应用形式:

  1. HTML层面,通常是在塌陷的父容器底部插入具有clear:both声明的block水平元素,通常使用<div></div>元素。

方法的不足:添加了多余的裸露的<div></div>标签

  1. CSS层面,使用after在父元素底部生成一个具有clear:both声明的伪元素:.clerafix:after{}

方法的不足:对IE6/IE7无效。

权衡后的策略:

IE8以上的浏览器使用:

.clearfix:after{content:'';display:table;clear:both;}

IE6/IE7使用.clearfix{*zoom:1;}

注意:切勿滥用.clearfix,它只应该应用于包含浮动子元素的父级元素上。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 1...

953
来自专栏Windows Community

New UWP Community Toolkit - RadialProgressBar

概述 UWP Community Toolkit  中有一个圆形的进度条控件 - RadialProgressBar,本篇我们结合代码详细讲解  RadialP...

38810
来自专栏Nian糕的私人厨房

Canvas 让你的屏幕下一场 Hacker 流星雨吧

今天来分享一个很狂拽酷炫吊炸天的特效,其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图(手动滑稽),实现起来很简单,跟着动手一起来吧

842
来自专栏听雨堂

在Mapx中设置单个图元的样式

        前几天研究了一下,感觉都快忘了。虽然去啃帮助仍然可以把这些东西啃出来,但有点烦。把记忆的东西零星整理一下: Mapx4不支持具体到图元的样式的指...

1887
来自专栏Android知识点总结

Android原生绘图进度条+简单自定义属性代码生成器

1162
来自专栏前端杂货铺

清除浮动的原理剖析

常用的清除浮动的几种方法总结下:   1,手动设置一个标签(在浮动元素下方),然后对其设置clear属性     2,给浮动元素设置 :after伪类,创建块元...

4049
来自专栏前端学习心得

CSS中的BFC

2025
来自专栏练小习的专栏

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

5226
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记

1294
来自专栏极客猴

会变色的TextView

近几年来,网络直播可以说是非常火热。网红也是遍地花开,其中不少主播在 PC 端做直播,也有很多主播用手机来直播。主播和观众经常需要互动交流,所以文字交流必不可少...

531

扫码关注云+社区