以下是个人学习笔记,仅供学习参考。

1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题。

在给没有margin-top-border父元素中的子元素添加margin-top时,发现没有直接表现出来,而是作用到父元素身上,就会导致子元素的margin-top溢出。

条件:
1、父元素没有上边框
2、为第一个子元素设置上外边距时
解决方案:
1、为父元素增加上边框
弊端:父元素会变高
2、通过为父元素设置上内边距来取代子元素的上外边距
弊端:也会增加父元素的高度
3、在父元素中,增加一个空 <table>元素
弊端:页面中多一个空元素而已

4.使用内容生成:before,完美!

<!-- 解决上边距溢出问题:before使用代码 -->
html部分:
<div id="container">
    <div id="item"></div>
</div>
css部分:
 #item{
           width:200px;
            height:200px;
            background:pink;
            /*子元素的上外边距作用到父元素*/
            margin-top:20px;
        }
        #container:before{
            content:"";
            display:table;
        }

2.关于浮动元素父元素高的问题:

条件:

父元素中有子元素float的话,可能就会影响父元素的高度,从而影响布局;

解决方案:

1.直接给父元素定高;

弊端:必须知道父元素的高;

2. 使用overflow属性值为hidden解决;

弊端:会隐藏溢出的内容,(当需要隐藏时使用,按需使用)

3.在父元素中最后面未知添加一个块级元素或table属性元素,并加clear属性值为both;

弊端:页面中多了一个空元素(影响不大,算是很nice)

4.使用内容生成:after解决,完美!

/*解决浮动高问题*/

html部分:
<!-- 解决浮动元素高的问题 -->
<div id="df">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>
css部分:
 /*解决浮动高问题*/
        #df{
            background:yellow;
        }
        #d1,#d2,#d3{
            width:200px;
            height:200px;
        }
        #d1{
            background:red;
            float:left;
        }
        #d2{
            background:green;
            float:left;
        }
        #d3{
            background:blue;
            float:left;
        }
        #df:after{
            content:"";
            display:block;
            clear:both;
        }

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案的更多相关文章

  1. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  2. 解决 css 浮动后 父元素高度失效问题

    应用场景 子元素标签使用 浮动后,会出现浮在父元素上层,脱离了.导致父元素没办法根据子元素的高度而变化,提供以下解决方案. 解决代码 把 '.clearfix ' Class 样式添加到 父元素即可. ...

  3. css 添加伪元素 消除浮动 对父元素高度产生的影响

  4. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  5. CSS 实现:父元素包含子元素,子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  6. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. ss 如何解决margin-top使父元素margin失效

    给子元素设置margin-top的时候父元素的也会受影响.会产生子元素和父元素margin合并的问题. 解决办法: 给父元素设置padding.或者border把父子的margin之间隔开. 一般来说 ...

  8. 子元素margin-top属性传递给父元素的问题 转!

    问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...

  9. 子元素用margin-top 为什么反而作用在父元素上?对使用margin-top 的元素本身不起作用?

    在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...

随机推荐

  1. docker容器启动参数

    docker run [option] 镜像名 [向启动容器中传入的命令] 常用可选参数说明: -i 表示以“交互模式”运行容器 -t 表示容器启动后会进入其命令行.加入这两个参数后,容器创建就能登录 ...

  2. POJ 2871

    #include<iostream> #include<stdio.h> #include<iomanip> using namespace std; int ma ...

  3. [Umbraco] 熟悉管理页面

    登录到umbraco管理界面后,发现其后台管理页很简洁 首页看到左侧部分是一个Content和Sections,右侧是管理区域 介绍各个Sections代表的含义: "Content&quo ...

  4. 课程一(Neural Networks and Deep Learning),第四周(Deep Neural Networks) —— 3.Programming Assignments: Deep Neural Network - Application

    Deep Neural Network - Application Congratulations! Welcome to the fourth programming exercise of the ...

  5. ORACLE数据库表解锁record is locked by another user

    出现此问题多由于操作Oracle执行完,没有COMMIT,直接把PL/SQL关闭掉,后来导致那张表被锁住,当编辑时就会出现这个信息,record is locked by another user! ...

  6. (转)Python3 模块3之 Urllib之 urllib.parse、urllib.robotparser

    原文:https://blog.csdn.net/qq_36148847/article/details/79153738 https://blog.csdn.net/zly412934578/art ...

  7. Webflux快速入门

    SpringWebflux是SpringFramework5.0添加的新功能,WebFlux本身追随当下最火的Reactive Programming而诞生的框架,那么本篇就来简述一下这个框架到底是做 ...

  8. Error:fatal: Not a git repository (or any of the parent directories): .git

    在项目目录下执行git init命令. 大功告成.

  9. Android 开发工具类 35_PatchUtils

    增量更新工具类[https://github.com/cundong/SmartAppUpdates] import java.io.File; import android.app.Activity ...

  10. Python基础之好玩的字符串格式化f-string格式

    转自白月黑羽 Python3教程 : http://www.python3.vip/doc/tutorial/python/0010/#f-string-格式化 f-string 格式化 f-stri ...