一.在设置盒子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. mysql存储过程分库分表

    -- 存储过程创建库  分为两条语句删除和创建DELIMITER $$USE myplan $$DROP PROCEDURE IF EXISTS createDBN $$CREATE PROCEDUR ...

  2. python调用c代码

    Linux环境下使用python调用C的printf例子: #!/usr/bin/env python2.7 #-*- coding:utf-8 -*- from ctypes import * de ...

  3. 利用可变参数模拟Printf()函数实现一个my_print()函数和调用可变参数注意的陷阱！

    可变参数函数的实现与函数调用的栈结构密切相关,正常情况下C的函数参数入栈规则为__stdcall, 它是从右到左的,即函数中的最右边的参数最先入栈. 例如,对于函数: void test(char a ...

  4. 【Java入门提高篇】Day3 抽象类与接口的比较

    抽象类跟接口都讲完了,现在来做一个比较. 其实说实话,没有多大的可比较性,它们是完全不同的两个东西,它们的抽象不在同一个层级上.但是为了让大家更好的理解,还是做一个比较吧,毕竟它们都很抽象(233). ...

  5. Python之文件的基本操作

    在python中,对文件的基本操作一共有如下四种: 1.打开文件 file_obj = open("文件路径","模式") 常用的打开文件模式有: r:以只读方 ...

  6. Less的嵌套规则

    Less的嵌套规则 在使用标准CSS时,要为多层嵌套的元素定义样式,要么使用后代选择器从外到内的嵌套定义,要么给这个元素加上类名或 id 来定义.这样的写法虽然很好理解,但维护起来很不方便,因为无法清 ...

  7. 杭电ACM——自我强化步骤

    第一阶段:开始入门吧!(15天,53题) http://blog.csdn.net/always2015/article/details/44966019#t0 一．输入输出练习(2天,10题) 10 ...

  8. 关于mysql插入数据异常

    今天创建数据库时,在插入数据时出现了几个问题.(首次在LInux环境下创建数据库) 一个是关于SQL Error [1146] [42S02]: Table 'struts2exec.s_user' ...

  9. [转]git问题ERROR: Repository not found.的解决

    原文地址:http://blog.csdn.net/u010154424/article/details/51233966 在github中新增了一个项目,按照git的提示添加了远程仓库,但是提交的时 ...

  10. PF_RING install in centos7

    很多centos7是最小化安装. 这样很多kernel就没有安装全,而且很多开发库也没有. 在安装PF_RING过程中,会缺少很多依赖. 首先安装依赖包: yum -y install numactl ...