HTML&CSS基础-高度塌陷问题

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.高度塌陷问题 

1>.HTML源代码

<!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: yellow;

                /**

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

                 *

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

                 *

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

                 *         我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

                 *

                 *

                 *

                 *

                 */

                float: left;

            }

            .box3{

                width: 100px;

                height: 100px;

                background-color: deeppink;

            }

        </style>

    </head>

    <body>

        <div class="box1">

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

        </div>

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

    </body>

</html>

2>.浏览器打开以上代码渲染结果

二.解决高度塌陷问题方案1

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>解决高度塌陷问题方案1</title>

        <style type="text/css">

            .box1{

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

                border: 10px red solid;

                /**

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

                 *

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

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

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

                 *        2>.开启BFC的元素可以包含浮动元素的子元素;

                 *

                 *     父如何开启元素的BFC?有以下几种方式:

                 *         1>.设置元素浮动

                 *             例如:"float: left;"

                 *             使用这种方式开启，虽然子元素可以撑开父元素，但是会导致父元素的宽度丢失，而这种方式也会导致下边的元素上移，不能解决问题，因此这种解决方案并不推荐使用。

                 *         2>.设置元素绝对定位

                 *             基本上和设置元素浮动的效果是一样，因此这种方式也不推荐使用

                 *         3>.设置元素为inline-block;

                 *             例如:"display: inline-block;"

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

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

                 *             例如:"overflow: auto;"

                 *             比如将overflow的值设置为auto或者hidden的方式是副作用是最小的开启BFC的方式，因此这种方式我们是推荐使用的。

                 *

                 *     温馨提示:

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

                 *         在IE6虽然没有BFC，但是具体一个隐藏的属性叫做haslayout，该属性的作用和BFC类似，所以在IE6浏览器可以通过开hasLayout来解决该问题

                 *         开启haslayout方式很多，为我们直接使用副作用最小的:

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

                 *

                 *     综上所述:

                 *         因此生产环境中为了兼容性强我们可以将"overflow: hidden;"和"zoom: 1;"都写上。

                 */

                overflow: hidden;

                /**

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

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

                 *

                 *     zoom这个样式，只有在IE中支持，其它浏览器都不支持，遗憾的是"zoom: 1;"这种写法目前只有IE6和IE7支持，IE8以上版本均不支持了。

                 *

                 */

                zoom: 1;

            }

            .box2{

                width: 100px;

                height: 100px;

                background-color: yellow;

                float: left;

            }

            .box3{

                height: 100px;

                background-color: deeppink;

            }

        </style>

    </head>

    <body>

        <div class="box1">

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

        </div>

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

    </body>

</html>

2>.浏览器打开以上代码渲染结果

二.解决高度塌陷问题方案2

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>解决高度塌陷问题方案2</title>

        <style type="text/css">

            .box1{

                border: 1px solid red;

            }

            .box2{

                width: 100px;

                height: 100px;

                background-color: yellow;

                float: left;

            }

            /**

             *     解决高度塌陷的方案二:

             *         可以直接在高度塌陷的父元素的最后，添加一个空白的div,由于这个div并没有浮动，所以它可以撑开父元素的高度;

             *         然后在对其进行清除浮动，这样可以通过这个空白div来撑开父元素的高度，基本没有副作用,而且兼容各种浏览器。

             *

             *     上面这种解决方案是W3C推荐的方式:

             *         使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构，有点美中不足，那么你还有其它的解决办法呢？

             */

            .clear{

                clear: both;

            }

        </style>

    </head>

    <body>

        <div class="box1">

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

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

        </div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

三.解决高度塌陷问题最终方案

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>解决高度塌陷问题方案3</title>

        <style type="text/css">

            .box1{

                border: 1px solid red;

            }

            .box2{

                width: 100px;

                height: 100px;

                background-color: yellow;

                float: left;

            }

             /**

              *     通过after伪类,选中clearfix的后边,以后谁高度塌陷都给他配置一个clearfix属性。

              *

              *     可以通过after伪类向元素的最后添加一个空白的块元素，然后对齐清除浮动，这样左和添加一个div的原理一样，可以达到一个相同的效果

              *

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

              */

             .clearfix:after{

                 /*添加一个内容*/

                 content: "";

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

                 display: block;

                 /*清除两侧的浮动效果*/

                 clear: both;

             }

             /**

              *     在IE6中不支持ater伪类,所以在IE6中还需要使用hasLayout来处理

              */

             .clearfix{

                 zoom: 1;

             }

        </style>

    </head>

    <body>

        <div class="box1 clearfix">

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

        </div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

JavaScript常用模块的更多相关文章

  1. seajs实现JavaScript 的 模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  2. python学习笔记之常用模块（第五天）

    参考老师的博客: 金角:http://www.cnblogs.com/alex3714/articles/5161349.html 银角:http://www.cnblogs.com/wupeiqi/ ...

  3. Tengine 常用模块使用介绍

    Tengine 和 Nginx Tengine简介 从2011年12月开始:Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能 和特性. ...

  4. Day05 - Python 常用模块

    1. 模块简介 模块就是一个保存了 Python 代码的文件.模块能定义函数,类和变量.模块里也能包含可执行的代码. 模块也是 Python 对象,具有随机的名字属性用来绑定或引用. 下例是个简单的模 ...

  5. python——常用模块2

    python--常用模块2 1 logging模块 1.1 函数式简单配置 import logging logging.debug("debug message") loggin ...

  6. python学习日记（常用模块）

    模块概念 什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代 ...

  7. day20 python常用模块

    认识模块 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀.     但其实import加载的模块分为四个通用类别: 1 使用pytho ...

  8. python自动化开发-[第六天]-常用模块、面向对象

    今日概要: 1.常用模块 - os模块 - random模块 - shutil模块 - hashlib模块 - pickle/json模块 - shelve模块 - configparser模块 - ...

  9. Python常用模块之json模块

    常用模块: 一个Python文件就是一个模块 import xxx 1. 标准模块,Python自带的,如time/random 2. 第三方模块,如连接mysql,需要安装 3. 自己写的Pytho ...

随机推荐

  1. 阿里云Linux系统基线检查优化

    1.用户权限配置文件的权限优化 描述:设置用户权限配置文件的权限 操作时建议做好记录或备份 chown root:root /etc/passwd /etc/shadow /etc/group /et ...

  2. CCNode详解

    cocos2d的所有类都以CC开头,那么实际上这个类的名字就是Node,类如其名,这个类的实例就是一个节点.Cocos2d的类是树状继承的,而在内存中,各个实例之间也是以“树”这种数据结构相关联的., ...

  3. LHS 和 RHS----你所不知道的JavaScript系列（1）

      变量的赋值操作会执行两个动作, 首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后在运行时引擎会在作用域中查找该变量, 如果能够找到就会对它赋值.----<你所不知道的Ja ...

  4. 2017qq红包雨最强攻略

    这个只支持苹果手机,而且要有苹果电脑,只有苹果手机是不行的. QQ红包规则:只要你到达指定的位置,就可以领取附近的红包,一般也就几毛,还有几分的,当然也不排除有更高的,只不过我是没遇到... 那么既然 ...

  5. c语言数字图像处理（一）：bmp图片格式及灰度图片转换

    本篇文章首先介绍了bmp图片格式,主要参考wiki上的内容,包括bmp文件的存储方式,对于一些常见的bmp文件格式都给了例子,并且对8位 16位RGB555 16位RGB565格式的bmp文件进行了简 ...

  6. 关于python内存地址问题

    遇到一个朋友,给我提了一个问题:python中的两个相同的值,内存地址是否一样? 当时印象里有这样一句话:Python采用基于值的内存管理模式,相同的值在内存中只有一份 于是张嘴就说是一样的 朋友说不 ...

  7. jupyter notebook 更改工作环境和浏览器

    转载自:https://blog.csdn.net/u011141114/article/details/78556227 1 修改默认目录 最近刚刚开始学习Python,比较好的一个IDE就是jup ...

  8. springboot 异步调用Async使用方法

    引言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在spring 3. ...

  9. PAT甲题题解-1060. Are They Equal (25)-字符串处理(科学计数法)

    又是一道字符串处理的题目... 题意:给出两个浮点数,询问它们保留n位小数的科学计数法(0.xxx*10^x)是否相等.根据是和否输出相应答案. 思路:先分别将两个浮点数转换成相应的科学计数法的格式1 ...

  10. 【Alpha阶段】M1事后报告

    时间:2015-11-13 23:30 地点:七公寓一楼会议室 参与人员:窝窝头全体成员(王若愚因事请假) 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述 ...