如果出现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. 安装numpy

    为了运行机器学习书上的实例,安装numpy.照着网上教程安装的,网上教程 1)下载numpy包 下载地址:https://pypi.python.org/pypi/numpy/#downloads 自 ...

  2. fiddler监听127.0.0.1或localhost

    localhost/127.0.0.1的请求不会通过任何代理发送,fiddler也就无法截获. 解决方案 1,用 http://localhost. (locahost紧跟一个点号)2,用 http: ...

  3. LTE Air interface Channels-----http://www.rfwireless-world.com/Tutorials/LTE-logical-transport-physical-channels.html

    LTE technology works based on three channel types viz. logical channel,transport channel and physica ...

  4. 转 : Hibernate懒加载深入分析

    懒加载可以提高性能吗? 不可以简单的说"能",因为hibernate的关系映射拖累了SQL的性能,所以想出懒加载来弥补.只是弥补而以,不会超越.所以大家不要想着使用了懒加载总体性能 ...

  5. 多线程完成socket

    //服务器端代码 public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSo ...

  6. json转类

    JavaScriptSerializer js = new JavaScriptSerializer();T detaile = js.Deserialize<T>(json);

  7. Flapper Bird的学习笔记(二)

    因为有一个超屌的梦想,所以就绝不会做一个孬种的追梦人! 本章节主要目的: 实现小鸟的飞行. 实现管道的随机出现. 实现相机跟随. 上次主要是场景的布置,这节全力拿下代码. 1.小鸟飞行(一种制作2D动 ...

  8. jsp页面往mysql里插入中文后数据库里显示乱码

    1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,<%@ page contentType="text ...

  9. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  10. C#获取一个目录下的所有文件名

    今天在做图像训练的时候发现需要把一大堆图片进行处理再读进分类器,本来是用C++写的,结果发现并不会,于是就用回了我最爱的C#,结果棒棒哒. 代码如下,简单粗暴,比网上C++的语法好看多了 using ...