高度塌陷的存在：原因分析
 1 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css">

             .box1{

                 /*为box1设置一个边框*/

                 border: 10px red solid;

             }

             .box2{

                 width: 100px;

                 height: 100px;

                 background-color: blue;

                 /*

                  * 在文档流中，父元素的高度默认是被子元素撑开的，

                  *     也就是子元素多高，父元素就多高。

                  * 但是当为子元素设置浮动以后，子元素会完全脱离文档流，

                  *     此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

                  *     由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

                  *

                  * 所以在开发中一定要避免出现高度塌陷的问题,

                  *     我们可以将父元素的高度写死，以避免塌陷的问题出现，

                  *     但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

                  */

                 /*为子元素设置向左浮动*/

                 float: left;

             }

             .box3{

                  height: 100px;

                  background-color: yellow;

             }

         </style>

     </head>

     <body>

         <div class="box1">

             <div class="box2"></div>

         </div>

         <div class="box3"></div>

     </body>

 </html>
 // 高度塌陷的解决方案一

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css">

             .box1{

                 border: 10px red solid;

                 /*

                  * 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context

                  *     简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

                  * 当开启元素的BFC以后，元素将会具有如下的特性：

                  *     1.父元素的垂直外边距不会和子元素重叠

                  *     2.开启BFC的元素不会被浮动元素所覆盖

                  *     3.开启BFC的元素可以包含浮动的子元素

                  *

                  * 如何开启元素的BFC

                  *     1.设置元素浮动

                  *         - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

                  *             而且使用这种方式也会导致下边的元素上移，不能解决问题

                  *     2.设置元素绝对定位

                  *     3.设置元素为inline-block

                  *         - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

                  *     4.将元素的overflow设置为一个非visible的值

                  *

                  * 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

                  */

                 /*overflow: hidden;*/

                 /*

                  *但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。

                  * 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，

                  * 该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题

                  * 开启方式很多，我们直接使用一种副作用最小的：

                  *     直接将元素的zoom设置为1即可

                  *

                  */

                 /*

                  * zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍

                  * zoom:1表示不放大元素，但是通过该样式可以开启hasLayout

                  * zoom这个样式，只在IE中支持，其他浏览器都不支持

                  */

                 zoom:1;

                 overflow: hidden;

             }

             .box2{

                 width: 100px;

                 height: 100px;

                 background-color: blue;

                 float: left;

             }

             .box3{

                  height: 100px;

                  background-color: yellow;

             }

         </style>

     </head>

     <body>

         <div class="box1">

             <div class="box2"></div>

         </div>

         <div class="box3"></div>

     </body>

 </html>
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .box1{

                 border: 1px solid red;

             }

             .box2{

                 width: 100px;

                 height: 100px;

                 background-color: blue;

                 float: left;

             }

             /*

              * 解决高度塌陷方案二：

              *     可以直接在高度塌陷的父元素的最后，添加一个空白的div，

              *     由于这个div并没有浮动，所以他是可以撑开父元素的高度的，

              *     然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，

              *     基本没有副作用

              *

              * 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

              */

             .clear{

                 clear: both;

             }

         </style>

     </head>

     <body>

         <div class="box1">

             <div class="box2"></div>

             <div class="clear"></div>

         </div>

     </body>

 </html>
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .box1{

                 border: 1px solid red;

             }

             .box2{

                 width: 100px;

                 height: 100px;

                 background-color: blue;

                 float: left;

             }

             /*通过after伪类，选中box1的后边*/

             /*

              * 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

              *     这样做和添加一个div的原理一样，可以达到一个相同的效果，

              *     而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

              */

             .clearfix:after{

                 /*添加一个内容*/

                 content: "";

                 /*转换为一个块元素*/

                 display: block;

                 /*清除两侧的浮动*/

                 clear: both;

             }

             /*

              * 在IE6中不支持after伪类,

              *     所以在IE6中还需要使用hasLayout来处理

              */

             .clearfix{

                 zoom:1;

             }

         </style>

     </head>

     <body>

         <div class="box1">

             <div class="box2"></div>

         </div>

     </body>

 </html>

CSS高度塌陷问题解决方案的更多相关文章

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

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

  2. CSS高度塌陷

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

  3. css float父元素高度塌陷

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. luogu1514 [NOIp2010]引水入城 (bfs+记忆化搜索)

    我们先bfs一下看看是否能到最底下的所有点 如果不能的话,直接把不能到的那几个数一数就行了 如果能的话: 可以发现(并不可以)某格能到达的最底下的格子一定是一个连续的区间 (因为如果不连续的话,我们先 ...

  2. pyinstaller模块使用

    目前pip install pyinstaller已经成熟 但是还是有一些坑,郁闷了好久,记一下注意点吧. 将py脚本打包成exe文件时,如果导入了非python自带库,则需要将导入的库从site-p ...

  3. C++11新特性——range for

    很多编程语言都有range for语法功能,自C++11起,终于将这个重要功能加入C++标准中.range for语句,可以方便的遍历给定序列中的每个元素并对其执行某种操作. 1.基本语法 for(d ...

  4. 【CH5302】金字塔 区间DP

    题目大意:给定一棵树,树上点有标记,给定一棵树的\(dfs\)序标记序列,求有多少种可能的子树形态.(子树之间有序) 这是一道区间计数类DP,涉及到树的\(dfs\)序. 这道题区间的划分点 \(k\ ...

  5. (转)Servlet的生命周期——初始化、运行、销毁全部过程

    背景:面试中很基础的一个问题,所以有必要好好整理一番. Servlet体系结构是建立在 Java 多线程机制上的,它的生命周期由 Web 容器负责. 当客户端第一次请求某个 Servlet 时,Ser ...

  6. react中多语言切换的实现方式

    目前正在进行的项目就是一个多语言切换的项目,有些前情知识我们可以 从https://react.i18next.com/getting-started进行了解. 说到使用方法,当然首先是要$ npm ...

  7. 多个 ng-app 中 Controllers & Services 之间的通信

    原文发布在个人独立博客上,链接:http://pengisgood.github.io/2016/01/31/communication-between-multiple-angular-apps/ ...

  8. c# Bitmap byte[] Stream 文件相互转换

    //byte[] 转图片 publicstatic Bitmap BytesToBitmap(byte[] Bytes) { MemoryStream stream = null; try { str ...

  9. C++ 栈和队列的使用

    要使用标准库的栈和队列,首先得添加头文件 #include <stack> #include<queue> 定义栈: stack<int>  curStack; 定 ...

  10. 在Win10中，在安装msi安装包的时候常常会出现代码为2502、2503的错误。

    前言:在Win10中,在安装msi安装包的时候常常会出现代码为2502.2503的错误.其实这种错误是由于安装权限不足造成的,可以这种msi的安装包不像其他exe的安装程序,在安装包上点击“右键”之后 ...