CSS-高度塌陷问题

表现

例如:

HTML:

<div class="first">
<div class="first-child1">first-child1</div>
<div class="first-child2">first-child2</div>
</div>
<div class="second">
second
</div>
<div class="third">
third
</div>

CSS:

.first{
width: 300px;
background-color: pink;
}
.first .first-child1,.first .first-child2{
float: left;
width: 100px;
height: 100px;
}
.first .first-child1{
background-color: purple;
margin-right: 10px;
}
.first .first-child2{
background-color: red;
}
.second{
width: 200px;
height: 150px;
background-color: blue;
}
.third{
width: 100px;
height: 150px;
background-color: green;
}

表现为:

产生的原因

由上面的例子可以看出,first盒子没有设置高度,由子元素撑开,但是由于子盒子设置了浮动,脱离了标准流,所以导致first盒子没有高度,表现为second和third盒子向上移动了。

可以得出产生高度塌陷的原因:

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。

高度塌陷的解决办法:

  1. 给父元素设置固定高度。但是使用这种方式后,父元素的高度就不能根据子元素自动撑高了,可以根据自己页面的特点,如果可以固定高度,可以使用这种方式,否则,不推荐这种方式。

  2. 额外标签法,这是w3c推荐的解决方案,但是不推荐,因为html的原则是写出语义化的标签,这种方式会额外增加无意义的标签。

    <div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
    <div style="clear: both;"></div>
    </div>
  3. 父元素的overflow属性(开启元素的BFC):

    .clearfix{
    overflow: hidden;
    }

    使用这种方式,属性值可以是非visible(hidden/auto/scroll)中任意,但是建议用hidden。

    这种方式副作用较小,这种方式在ie6中不支持,可以外加zoom: 1;

    .clearfix{
    overflow: hidden;
    zoom: 1;/*针对ie6*/
    }
  4. 单伪元素after清除浮动(开启元素的BFC):

    .clearfix::after{
    content: "";/*伪元素内容为空*/
    display: block;/*非默认的就行,也可以是table等等*/
    height: 0;/*伪元素高度为0,不影响其他元素*/
    clear: both;/*清除浮动*/
    visibility: hidden;/*不可见*/
    }
    .clearfix{
    zoom: 1;/*ie6元素没有BFC模式,但是这句代码会开启ie6中的hasLayout模式,只在ie中支持*/
    }

    这种方式现在使用比较广泛,很多大网站都是使用这种方式,副作用较小,只需要在配合处理ie6就可以了。

  5. 双伪元素清除浮动(开启元素的BFC):

.clearfix::before,.clearfix::after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;/*ie6元素没有BFC模式,但是这句代码会开启ie6中的hasLayout模式,只在ie中支持*/
}

这种做法写法比较麻烦,也不推荐。

清除浮动对父元素的影响后的效果:

BFC相关

根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。

当开启元素的BFC以后,元素将会具有如下的特性:

  1. 父元素的垂直外边距不会和子元素重叠
  2. 开启BFC的元素不会被浮动元素所覆盖
  3. 开启BFC的元素可以包含浮动的子元素

CSS-高度塌陷问题的更多相关文章

  1. CSS高度塌陷

    问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...

  2. CSS高度塌陷问题与解决办法

    问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...

  3. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  4. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  5. CSS: inline-block的应用和float块高度塌陷

    普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象.   高度塌陷解决方法:   ...

  6. css关于浮动的高度塌陷

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css之高度塌陷及其解决方法

    浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

  8. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  9. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  10. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

随机推荐

  1. Android-Java-静态变量与静态方法内存图

    描述Dog对象: package android.java.oop10; public class Dog { public static String name; public static int ...

  2. CentOS 7安装新版RabbitMQ解决Erlang 19.3版本依赖

    通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...

  3. Android开发 - ImageView加载Base64编码的图片

    在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码的图片.这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 ... 这些应用 ...

  4. 在源文件(.c)和头文件(.h)中声明和定义的区别——C语言

    最近在看多文件编程的时候遇到的一个问题,本来以为理解了声明和定义的区别(然而并没有····),也算是重新认识了一次声明和定义,下面上代码 情形一:在源文件(.c)中 相信大部分读者对声明和定义的理解是 ...

  5. 抽取JDBC工具类并增删改查

    抽取工具类: package demo; /* * 工具类 */ import java.sql.Connection; import java.sql.DriverManager; import j ...

  6. Qt之使用CQU库快速开发统一风格界面

    在使用Qt开发时,肯定是想让开发的项目界面统一风格:不希望每个界面都要程序员用代码去修饰美化以及进行事件处理等等,这样非常繁琐,容易出错而且没有格调:所以我就开发一个动态链接库,封装统一的风格界面.事 ...

  7. [转载]Apple Watch 开发详解

    Apple Watch 开发详解 Apple Watch现在对于第三方开发者来说更多的还是一块额外的屏幕.暂时WatchKit没有能给出足够的接口.现在Watch App的主要运算逻辑需要依赖iPho ...

  8. Hadoop生态系统之HDFS

    一.介绍 HDFS : 分布式文件系统(distributed filesystem),主从结构. 以流式数据访问模式来存储超大文件,运行于商用硬件集群上. 超大文件: 几百M,几百G,甚至几百TB大 ...

  9. JavaScript设计模式----装饰者模式

    装饰者模式的定义: 装饰者(decorator)模式能够在不改变对象自身的基础上,在程序运行期间给对像动态的添加职责.与继承相比,装饰者是一种更轻便灵活的做法. 装饰者模式的特点: 可以动态的给某个对 ...

  10. salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

    在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...