浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它。浮动会“扩散”到下一个清除浮动的元素处。这会引起不想要的页面布局效果。

  清除浮动的方法有三种:

    1、父元素overflow:hidden

    2、同时浮动父元素

    3、添加清除浮动元素。

  1、父元素overflow:hidden

    overflow:hidden的真正作用是防止元素被超大内容撑大。使用hidden后,元素保持其设定的高宽,超大的内容会被“剪切”掉,变为页面不可见部分。同时,overflow:hidden也能强迫父元素包围浮动子元素。

  2、同时浮动父元素

    浮动父元素后,父元素会紧紧包裹子元素(不管子元素是否浮动),这时父元素的高宽极有可能需要强制确定。由于父元素的浮动会导致父元素的后续元素也浮动,故需要在父元素的后续元素上清除浮动。

  3、添加清除浮动元素

    由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。——《CSS设计指南》

    父元素需要将非浮动元素包围起来,因此将非浮动元素做最后一个元素,同时父元素肯定将子元素包围起来。直接添加一个空白div清除浮动即可。

    不需要额外元素的写法:

 .clearfix:after {
 content:".";
 display:block;
 ;
 visibility:hidden;
 clear:both;
 }

    这三种方法的使用要因地制宜。比如,不能在下拉菜单的顶级元素上应用overflow:hidden ,否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部,而这恰恰是 overflow:hidden 所要阻止的。再比如,不能对已经靠自动外边距居中的元素使用“浮动父元素”技术,否则它就不会再居中,而是根据浮动值浮动到左边或右边了。

    

CSS围住浮动元素的三种方法的更多相关文章

  1. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  2. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$(&#39;.float&#39;)

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  3. css清除浮动float的三种方法总结

    原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...

  4. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  5. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  6. CSS 隐藏页面元素的 几 种方法总结

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...

  7. javascript 获取html元素的三种方法

    操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...

  8. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  9. CSS清除浮动大全的8种方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

随机推荐

  1. 是否用new来新建对象

    class A{ }: 1.不使用new来新建对象 A a: 使用完后什么也不用做,系统自动调用析构函数.使用空间是栈. 2.使用new来新建对象 A* a=new A();   delete a;/ ...

  2. pyhton2 python3 语法区别

    几乎所有的Python 2程序都需要一些修改才能正常地运行在Python 3的环境下.为了简化这个转换过程,Python 3自带了一个叫做2to3的实用脚本(Utility Script),这个脚本会 ...

  3. Android横竖屏切换及其相应布局载入问题

    第一.横竖屏切换连带载入多屏布局问题: 假设要让软件在横竖屏之间切换.因为横竖屏的高宽会发生转换,有可能会要求不同的布局. 能够通过下面两种方法来切换布局: 1)在res文件夹下建立layout-la ...

  4. python 笔记(一)

    1.Python优点 简单,优雅,明确 强大的模块第三方库 易移植 面向对角 可扩展 2.缺点 代码不能加密 执行速度慢 3.变量定义 第一个字母必须是字母表中的大小写,或下划线.不能以数字为开头. ...

  5. Android 开机过程PMS分析

    12-13 12:25:05.595 3253 3253 SystemServer !@Boot: Start PackageManagerService pm/PackageManagerServi ...

  6. iOS7适配问题

    iOS7适配问题 2013-09-28 08:32:37     我来说两句      作者:冻僵的企鹅 收藏    我要投稿 iOS 7发布了,适配问题来了,开发者都忙起来了. 先记一个iOS7 的 ...

  7. 如何利用php+android+新浪sae服务器做一个app下载应用

    功能简介:提供一个app下载的平台,类似于appstore,上面有很多app可供下载 实现基本思路:利用android,在手机桌面建立一个图标,点击该图标不是打开app应用,而是跳转到一个web页面, ...

  8. HK2使用详解

    HK2介绍 组件 生命周期 定义服务 注入服务 HK2介绍 HK2是一个轻量级动态依赖注入框架,它是JSR-330的实现. 组件 在HK2组件模型中,一个组件的功能是通过服务接口-服务实现的模式声明的 ...

  9. 第十五节、OpenCV学习(四)图像平滑与滤波

    图像的平滑与滤波 平滑滤波是低频增强的空间域滤波技术,是图像模糊.消除噪声. 一.2D滤波器cv2.filter2D() 对于2D图像可以进行低通或者高通滤波操作,低通滤波(LPF)有利于去噪声,模糊 ...

  10. 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践

    - 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践 - 实验任务 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主 ...