当父级元素没有设定高度时候，而子集元素设定float类型时候，此时父级元素不能靠子集元素撑起来，所以就形成了塌陷； 示例分析 **1.Float之前的效果**

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>float示例</title>
  6.     <style>
  7.         #father{
  8.             background: red;
  9.         }
  10.         #son{
  11.             width: 50px;
  12.             height: 50px;
  13.             background: blue;
  14.         }
  15.         #second{
  16.             background: gray;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div id="father">
  22.     <div id="son">子元素</div>
  23.     <p>这是父元素下面的一个p段落</p>
  24.     <div id="clear"></div>
  25. </div>
  26. <div id="second">这是第二个div</div>
  27. </body>
  28. </html>

2.Float之后的效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>float示例</title>
  6.     <style>
  7.         #father{
  8.             background: red;
  9.         }
  10.         #son{
  11.             width: 50px;
  12.             height: 50px;
  13.             background: blue;
  14.             float: left;
  15.         }
  16.         #second{
  17.             background: gray;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div id="father">
  23.     <div id="son">子元素</div>
  24.     <p>这是父元素下面的一个p段落</p>
  25.     <div id="clear"></div>
  26. </div>
  27. <div id="second">这是第二个div</div>
  28. </body>
  29. </html>

“`

CSS 解决Float后塌陷问题的更多相关文章

  1. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  2. 解决css的float父div没有高度

    在做页面设计常会碰到css的float父div没有高度的情况,HTML代码设计 <div class='box'> <div class='float_left'></d ...

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

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

  4. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  5. CSS 浮动(float)与定位(position)

    一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...

  6. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  7. 关于float高度塌陷问题

    和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...

  8. CSS 布局Float 【0】

    float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...

  9. DIV+CSS解决IE6，IE7，IE8，FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

随机推荐

  1. [Usaco2010 Hol]cowpol 奶牛政坛

    题目描述: 农夫约翰的奶牛住在N (2 <= N <= 200,000)片不同的草地上,标号为1到N.恰好有N-1条单位长度的双向道路,用各种各样的方法连接这些草地.而且从每片草地出发都可 ...

  2. 【故障公告】K8s CofigMap 挂载问题引发网站故障

    今天凌晨我们用阿里云服务器自建的 kubernetes 集群出现突发异常情况,博客站点(blog-web)与博客 web api(blog-api)的 pod 无法正常启动(CrashLoopBack ...

  3. （001）每日SQL学习：关于UNION的使用

    union内部必须有相同的列或者相同的数据类型,同时,每条 SELECT 语句中的列的顺序必须相同.union合并了select的结果集. union 与union all的不同: union合并了重 ...

  4. 基于nginx的频率控制方案思考和实践

    基于nginx的频率控制方案思考 标签: 频率控制 nginx 背景 nginx其实有自带的limit_req和limit_conn模块,不过它们需要在配置文件中进行配置才能发挥作用,每次有频控策略的 ...

  5. 【LinuxShell】命令行常用快捷键

    Ctrl + A :光标跳到一行命令的开头.一般来说,Home 键有相同的效果: Ctrl + E :光标跳到一行命令的结尾.一般来说,End 键有相同的效果:. Ctrl + U :删除所有在光标左 ...

  6. Python爬虫学习笔记(三)

    Cookies: 以抓取https://www.yaozh.com/为例 Test1(不使用cookies): 代码: import urllib.request # 1.添加URL url = &q ...

  7. LOJ10076

    USACO 2006 Nov. Gold 贝茜把家搬到了一个小农场,但她常常回到 FJ 的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而 ...

  8. C#Process调用外部程序

    前言 使用C#调用外部程序,一种是通过Process类,一种是通过命令行,本文主要说一下使用C#中的Process类调用外部程序的方式. 过程: 1. 创建Process对象 2. 配置启动选项(输入 ...

  9. 硬核！八张图搞懂 Flink 端到端精准一次处理语义 Exactly-once（深入原理，建议收藏）

    Flink 在 Flink 中需要端到端精准一次处理的位置有三个: Source 端:数据从上一阶段进入到 Flink 时,需要保证消息精准一次消费. Flink 内部端:这个我们已经了解,利用 Ch ...

  10. 通过Portainer统一管理不同服务器的Docker

    通过Portainer统一管理不同服务器的Docker 一.可视化管理工具Portainer的安装 二.跨服务器管理Docker 2.1开启2375监听端口 2.2Portainer配置远程管理 一. ...