首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS理解之Float

CSS理解之Float

作者头像
小胖
发布2018-06-27 15:59:31
6710
发布2018-06-27 15:59:31
举报

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,它只应该应用于包含浮动子元素的父级元素上。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.07.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.Float的设计初衷仅仅是:
  • 2.清除浮动的两大基本方法:
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档