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

  清除浮动的方法有三种:

    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. imx6 Image Vector Table (IVT)

    imx6开启启动之后,运行板子上的ROM程序.ROM确定启动的设备,进行一些初始化,然后读取IVT,进行寄存器初始化,最后运行uboot/cpu/arm_cortexa8/start.S中的_star ...

  2. loadrunner比较有用的字符串函数

    loadrunner比较有用的字符串函数 ******************************************************************************* ...

  3. Java读取Excel文件的几种方法

    Java读取 Excel 文件的常用开源免费方法有以下几种: 1. JDBC-ODBC Excel Driver 2. jxl.jar 3. jcom.jar 4. poi.jar 简单介绍: 百度文 ...

  4. iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结

    今天  我对iOS系统下 的手机屏幕尺寸 分辨率 及系统版本做了一次系统总结 供大家参考. 首先 是系统:    随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的 ...

  5. poj 1704 Georgia and Bob(阶梯博弈)

    Georgia and Bob Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8656   Accepted: 2751 D ...

  6. infinite-scroll插件无限滚动加载数据的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  7. Transform 1

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  8. mysql--help不可用

    1.问题描述: 执行help语句时没有得到相应的返回只是提示检查相关表是不是已经加载: mysql> help contents; Nothing found Please check if ' ...

  9. 解决android模块化升级方法

    有关本机android升级版本必须是全apk更新安装,我们无法实现的一些模块化升级的解决思路: 本地人+web混合动力APP~ 查询详情,我们必须实现模块化升级,无论使用方法,我这样做.首页写在每个功 ...

  10. .CN根域名被攻击至瘫痪,谁之过?

    2013-10-08 09:19 佚名 新浪科技 2013年8月25日凌晨,.CN域名凌晨出现大范围解析故障,经分析.CN的根域授权DNS全线故障,导致大面积.CN域名无法解析.事故造成大量以.cn和 ...