一.在设置盒子div的子元素的外边框margin-top，子元素属性不起作用，父元素下沉：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="box1 "></div>

    </div>

</body>

</html>

　子元素div设置了margin-top为20px；结果为：　

没有起作用，而是父元素下沉了，原因是在垂直方向上，子元素必须找到父元素的位置信息，或边界或大小。

解决的办法一般有三种：
1.为父元素设置边框：由于在不需要边框的时候，为了清除塌陷而设置边框，增加了额外的操作和计算的麻烦，一般较少使用。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

            border: 1px solid green;  # 设置边框

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="box clearfix">

        <div class="box1 "></div>

    </div>

</body>

</html>

2.设置元素的溢出修剪，overflow:hidden。说明：设置溢出修建隐藏后，可以找到盒子的边界，但这种方法会丢失一部分显示的内容，很少使用。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

            overflow: hidden;   # 设置元素溢出隐藏

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin: 20px;

        }

    </style>

</head>

<body>

    <div class="box clearfix">

        <div class="box1 "></div>

    </div>

</body>

</html>

　　3.设置伪类，利用Class：before和class：after伪类设置空的内容来占位，使得子元素可以找到定位参考物。（最常使用！）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>塌陷TOP</title>

    <style>

        .box{

            width: 500px;

            height: 100px;

            background-color: green;

        }

        .box1{

            width: 200px;

            height: 50px;

            background-color: red;

            margin: 20px;

        }

        /* 设置伪类before */

        .clearfix：before{

            content: "";

            display: table;

        }

    </style>

</head>

<body>

    <div class="box clearfix">

        <div class="box1 "></div>

    </div>

</body>

</html>

　三种方式修改后的效果：

　

前端笔记---塌陷top的更多相关文章

  1. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  2. 写给后端的前端笔记：定位（position）

    写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别 我们所说的定位position主要有三类:固定定位 ...

  3. 前端笔记-html

    前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <> ...

  4. 1.前端笔记之html

    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...

  5. 写给后端的前端笔记：浮动（float）布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

  6. 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事

      一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...

  7. 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）

    笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...

  8. 前端笔记之CSS（下）浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

  9. 前端笔记之移动端&响应式（中）视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

随机推荐

  1. [转载] Java NIO与IO

    原文地址:http://tutorials.jenkov.com/java-nio/nio-vs-io.html 作者:Jakob Jenkov   译者:郭蕾    校对:方腾飞 当学习了Java ...

  2. 【O】VSS 2005上传PDF文件之后，打开提示文件损坏或者内容为空

    问题: VSS 2005上传PDF文件之后,打开提示文件损坏或者内容为空: 解决方式: 在vss的客户端的tools-option中,file type选项卡里,在binary file文本框中,加入 ...

  3. 多个Fragment的分开管理方案

    当项目里有多个Fragment的时候  我们希望让Fragment有个分类 并且展示的时候不会混淆在一起 例如:项目中导航栏有三个按钮   每个按钮对应一种分类的布局,每个分类的布局中有多个Fragm ...

  4. Spring4 JDBC详解

    Spring4 JDBC详解 在之前的Spring4 IOC详解 的文章中,并没有介绍使用外部属性的知识点.现在利用配置c3p0连接池的契机来一起学习.本章内容主要有两个部分:配置c3p0(重点)和 ...

  5. Python——正则表达式

    此篇文章结合小甲鱼的笔记和视频整理. 1 编译 Python 通过 re 模块为正则表达式引擎提供一个接口,同时允许你将正则表达式编译成模式对象,并用它们来进行匹配. 正则表达式被编译为模式对象,该对 ...

  6. 《java.util.concurrent 包源码阅读》21 CyclicBarrier和CountDownLatch

    CyclicBarrier是一个用于线程同步的辅助类,它允许一组线程等待彼此,直到所有线程都到达集合点,然后执行某个设定的任务. 现实中有个很好的例子来形容:几个人约定了某个地方集中,然后一起出发去旅 ...

  7. CSS-笔记1-选择器与文本元素

    知识点一: CSS概念:CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆. 知识点二: 选择器格式与部分属性: 写法 ...

  8. Core 核心标签库->运算式操作

    jstl--->Core 核心标签库->运算式操作  -->out.remove.set.catch <c:out>:用来显示资料的内容 语法1:没有本体的内容 < ...

  9. Float精度丢失

    BigDecimal _0_1 = new BigDecimal(0.1); BigDecimal x = _0_1; for(int i = 1; i <= 10; i ++) { Syste ...

  10. file-loader 使用心得

    将webpack 里面的图片文件都放在制定文件夹. 配置如下 { test: /\.png$/, loader: "file-loader?name=imgs/[name]-[hash].[ ...