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 条评论
登录 后参与评论

相关文章

来自专栏从流域到海域

Python 函数

Python的函数与其他语言的函数概念上是一致的,只是形式上有所不同。在面向过程的编程语言中(C语言),函数是代码的基本组成形式,是功能的基本模块;在面向...

1707
来自专栏Bingo的深度学习杂货店

清除浮动的方法

本章主要介绍三种常用的清除浮动的方法,主要包括: ---- [1] 增加一个空 div, 使用 clear:both 将浮动元素 "挤到" 父元素中 [2] ...

2525
来自专栏林德熙的博客

win10 uwp 异步进度条 圆形进度条

进度条可以参见:http://edi.wang/post/2016/2/25/windows-10-uwp-modal-progress-dialog

381
来自专栏数说工作室

5分钟看懂模块 || 数说 · 语言

本文是【SAS Says】系列的扩展篇第四文,5分钟带您看懂IML中的模块功能,它类似于创建一个函数。 用20分钟玩手机,不如花5分钟跟Ansta学习SAS。 ...

3488
来自专栏练小习的专栏

可视化格式模型-绝对定位

相对包含块偏移定位 在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元...

18710
来自专栏全沾开发(huā)

使用box-shadow进行画图(性能优化终结者)

1102
来自专栏枕边书

设计模式,Let's “Go”! (中)

前言 接上篇 设计模式,Let's “Go”! (上), 继续更新设计模式,今天介绍的设计模式有模板模式、迭代器模式、组合模式、状态模式、代理模式、桥接模式和建...

1907
来自专栏章鱼的慢慢技术路

程序员算法时间空间复杂度速查表

1265
来自专栏章鱼的慢慢技术路

程序员算法时间空间复杂度速查表

1633
来自专栏数据小魔方

条件格式制作条形数据组图

今天跟大家分享用条件格式制作条形数据组图! ▽▼▽ 记得之前有一期跟大家分享过条件格式图表的制作方法,今天所要讲的案例,方法是一样的,只是通过多个条形图叠加及排...

3416

扫码关注云+社区