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

相关文章

来自专栏cnblogs

CSS3新特性应用之字体排印

一、插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素。 +...

1937
来自专栏一“技”之长

Java开发GUI之可编辑区域 原

    Java的awt包中提供了单行的文本编辑组件TextField与多行的文本编辑区TextArea,这两个组件都是继承自TextComponent类。

632
来自专栏前端说吧

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

1194
来自专栏Pythonista

Golang之(for)用法

地鼠每次选好了一块地,打洞,坚持半个月发现地下有块石头,然后他就想绕路了。。。殊不知绕路只会让它离成果越来越远

1114
来自专栏柠檬先生

css3 3d变换和动画——回顾

1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d ...

1847
来自专栏搞前端的李蚊子

解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

      在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就...

2967
来自专栏Windows Community

New UWP Community Toolkit - RadialProgressBar

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

37810
来自专栏coding for love

CSS入门5-选择器

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

783
来自专栏Coco的专栏

浅析inline-block--使用inline-block创建布局

1797
来自专栏Android知识点总结

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

732

扫码关注云+社区