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

相关文章

  • CSS实现全屏切换效果

    小胖
  • Vue成神之路之内部指令

    vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

    小胖
  • CSS理解之margin

    小胖
  • WebUploader文件上传插件

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥H...

    一觉睡到小时候
  • Vue的使用

    h2内的标签中test就是由vue中传的msg变量的值,但是其中html标签不会被解析

    小小咸鱼YwY
  • IM聊天教程:发送图片/视频/语音/表情

    为此,小编特意写了一个vue版本的Demo,实现了图片视频文件和表情的的发送,参考这个Demo源代码,相信你就可以轻松的用Uniapp和小程序完成类似的功能。

    GoEasy消息推送
  • 滚动的屏保

    图片的移动,也就是图片坐标的变换,我刚开始做的时候是考虑到四个面,判断每个面是否碰到屏幕壁。这样做的坏处是,需要判断多次,也可能是按照固定的路线在走,一成不变。...

    微醺
  • 千万不要往 Shell 里粘贴命令!

    对于用惯了 IDE 的程序员来说,在终端里敲命令可能没那么顺手,也记不住那么多复杂的命令。比较偷懒的做法就是网上搜相关的命令,复制到剪贴板往命令行窗口里一贴,完...

    lucifer210
  • Netflix将VP9应用于移动视频流编码

    A.采用的两种编码标准: 1. VP9: VP9是一款由Google开发的免费开源的视频编解码器,与最优的H.264编码器相比具有将近50%的性...

    用户1324186
  • jquery的html,text,val

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。 这三个方法功能...

    marsggbo

扫码关注云+社区

领取腾讯云代金券