当父元素内都是漂浮元素时，会造成父高度塌陷的问题。(因为等同于父元素内容为空，所以长，宽都等于空)

　　我们想要的页面结构是：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .son1{

            width: 100px;

            height: 100px;

            background-color: red;

            float: left;

        }

        .son2{

            width: 100px;

            height: 100px;

            background-color: green;

            float: left;

        }

        .p2{

            width: 100%;

            height: 100px;

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="p1">

    <div  class="son1"></div>

    <div class="son2"></div>

</div>

<div class="p2"></div>

</body>

</html>

父元素塌陷

　　

　　这时候，我们想既然父元素为空，导致了高度塌陷，那么就给父元素填充点文本内容。

<div class="p1">123

    <div  class="son1"></div>

    <div class="son2"></div>

</div>

　　虽然黄色模块向下移动了，但是并没有达到我们想要的效果。我们想给父元素设置一个固定的长度和宽带。

<div class="p1" style="height: 100px;width: 100%">

    <div  class="son1"></div>

    <div class="son2"></div>

</div>

　　看效果，已经达到我们预期了。但是这个解决方案真的好吗？答案明显是否定的。当悬浮模块大小发生改变时,我们需要再手动更改父元素的长宽，这十分不方便。

　　这时候,我们想到了clear,他会让元素周边不会有悬浮元素，可以达到块标签的效果。

　　我们需要先在父元素中创建一个空白块元素(div)。再给他设置clear属性。就可以达到效果了

<div class="p1">

    <div  class="son1"></div>

    <div class="son2"></div>

    <div style="clear: both"></div>

</div>

css--父元素塌陷的更多相关文章

  1. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  2. CSS父元素高度随子元素高度变化而变化

    <html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...

  3. css父元素背景覆盖其子元素背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. css父元素透明度（opacity）对子元素的影响

    首先子元素会继承父元素的透明度: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度. 其次子元素的透明度是基于父元素的透明度计 ...

  5. css float父元素高度塌陷

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

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

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

  7. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  8. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  9. CSS实现父元素半透明，子元素不透明

    CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...

随机推荐

  1. 多态 鸭子类型 反射 内置方法（__str__,__del__） 异常处理

    ''' 1什么是多态 多态指的是同一种/类事物的不同形态 2 为何要有多态 多态性:在多态的背景下,可以在不用考虑对象具体类型的前提下而直接使用对象 多态性的精髓:统一 多态性的好处: 1增加了程序的 ...

  2. 高级shell 脚本

    1.函数 函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用.要在脚本中使用该代码块时,只要使用所起的函数名就行了(这个过程称为调用函数).本节将会介绍如何在shell脚本中创建和使用函数 创 ...

  3. context使用

    1. 概述 go语言中goroutine之间的关联关系,缺乏维护,在erlang中有专门的机制来保障新开协程的生命周期,在go语言中,只能通过channel + select来实现,但不够直观,很绕. ...

  4. day 07

    # 数据类型的相互转化# 字符编码# 文件操作 # 1.哪些类型可以转化为数字# res = int('10')# print(res)# res = int('-3')# print(res)# r ...

  5. kubernets controller 和 CRD的扩展

    sample git repo 各个组件开发指导 operator 介绍 此图来自谷歌员工的实践介绍 client-go的使用和源码分析 (dlv) p pods *k8s.io/api/core/v ...

  6. pat1067 在离散数学中置换群思想上可用并查集和递归两种方法求解问题

    1.递归求解  注:叙述时 节点其实就是数字0-N-1 !!!最好用一个数组记录0-N-1每个数字的位置 !!!递归计算一个置换群内部的节点数 分为两种情况 累加M,M即是一个置换群所有数字在正确位置 ...

  7. Bigger-Mai 养成计划，Python基础巩固三

    1.集合的基本操作(set)集合是一个无序的,不重复的元素集合,他的主要作用是去重:把一个列表变为集合就自动去重了.关系测试:测试两组数据之间的交集,差集,并集等关系 list_1 = [1,4,6, ...

  8. Docker报错 WARNING: IPv4 forwarding is disabled. Networking will not work.

    问题:创建容器的时候报错WARNING: IPv4 forwarding is disabled. Networking will not work. # docker run -it -p 3000 ...

  9. vue_全局注册过滤器

    在一个项目中, 某些过滤器全局都有可能用的到, 统一管理并自动化全局注册是很方便的. 代码如下, 后续只需要在src/filters/index.js中添加方法就可以全局使用过滤器了. // src/ ...

  10. spring boot2.0(二 ) lettcute访问redis

    前言 此处已经省略redis的安装,请自行百度查找redis的服务端安装过程. 1.pom文件配置: <project xmlns="http://maven.apache.org/P ...