如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况。
HTML标签代码:
<div class="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

css样式代码:

.wrap {
width: 100%;
background: red;
} .inner {
width: 50px;
height: 50px;
background: yellow;
float: left;
}

效果图:

之所以会这样,是因为当一个内层元素是浮动的时候,如果没有关闭浮动,其父元素也就不会再包含这个浮动的内层元素,因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开。
兼容性比较好而且比较优雅的清除浮动的方法如下。
在父元素标签上加一个清楚浮动的样式,

.clear {
zoom: 1;
} .clear:after {
display: block;
clear: both;
visibility: hidden;
content: '';
}

  通过给父元素加一个伪元素after,既不影响页面结构,而且较为容易理解,通用性很强,可以写到common样式里用来做通用的清楚浮动。

深入理解css系列:清除浮动的更多相关文章

  1. 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

  2. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  3. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  4. 深入理解css系列:css定位

    一.概述 1.默认文档流定位方式 (1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位: (2).HTML标签元素总体分为块状元素.内联元素.内联块状元素,可通过该标签对应的DOM ...

  5. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  6. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  7. CSS - clearfix清除浮动

    首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...

  8. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  9. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

随机推荐

  1. LCS

    /**LCS问题*/ #include <iostream>#include <string>#include <algorithm> using namespac ...

  2. 求第N个质数算法

    用python求从1开始第1000个质数? 质数:只能被1和它本身整除的数.那好,我们开始写程序(一个小算法). def calc_prime(prime,num): i,gab=7,2 while ...

  3. ie6兼容问题汇总

    这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间,参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下,也方便我日后再用到: 1.IE的cache设置为Every visit t ...

  4. Windows Store App 图像

    在Windows应用商店应用中可以使用两种方法来显示图片,这两种方法分别为使用Image对象和使用ImageBrush对象.Image对象可以直接呈现一幅图像,而ImageBrush对象则可以用一幅图 ...

  5. DNS bind子域授权安装

    失败经验:rhel 6.x bind 9.8,两台做子域授权,最后失败.原因不详. 改用rhel 5.5, bind 9.3,同样的配置,就成功了.具体记录一下9.3的配置. 安装:采用安装RHEL时 ...

  6. 关于EM,REM,PX的几点注意

    px是绝对单位,不支持IE的缩放,em是相对单位. em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625 ...

  7. Lyft押重注于苹果编程语言Swift

    Lyft押重注于苹果编程语言Swift 1年后获得丰厚回报BI中文站 8月22日报道 一年多以前,打车应用Lyft做出重大决定,决心押重注于苹果开发的编程语言Swift,用这种编程语言重写其所有iPh ...

  8. Office 365 SharePoint Online 学习链接

    Here is an article about how to develop for SharePoint Online(Ofiice 365):http://www.microsoft.com/e ...

  9. JS 跑马灯

    利用jquery 来实现图片切换.文字转换移动的工具. MSClass 连接 http://www.popub.net/script/MSClass.html Mark 用

  10. 近期编程问题——epoll failed:bad file descriptor

    出现问题:epoll_wait:Bad file descriptor 原因:IO时间的socket描述符在epoll_ctl处理前就关闭了. 解决方法:不要在epoll_ctl之前关闭socket描 ...