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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float示例</title>

    <style>

        #father{

            background: red;

        }

        #son{

            width: 50px;

            height: 50px;

            background: blue;

        }

        #second{

            background: gray;

        }

    </style>

</head>

<body>

<div id="father">

    <div id="son">子元素</div>

    <p>这是父元素下面的一个p段落</p>

    <div id="clear"></div>

</div>

<div id="second">这是第二个div</div>

</body>

</html>

2.Float之后的效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float示例</title>

    <style>

        #father{

            background: red;

        }

        #son{

            width: 50px;

            height: 50px;

            background: blue;

            float: left;

        }

        #second{

            background: gray;

        }

    </style>

</head>

<body>

<div id="father">

    <div id="son">子元素</div>

    <p>这是父元素下面的一个p段落</p>

    <div id="clear"></div>

</div>

<div id="second">这是第二个div</div>

</body>

</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. [Usaco2008 Mar]牛跑步

    题目描述 BESSIE准备用从牛棚跑到池塘的方法来锻炼. 但是因为她懒,她只准备沿着下坡的路跑到池塘, 然后走回牛棚. BESSIE也不想跑得太远,所以她想走最短的路经. 农场上一共有M (1 < ...

  2. Django - WebSocket：dwebsocket

    Django - WebSocket:dwebsocket 什么是WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换 ...

  3. Django前后端分离项目部署

    vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...

  4. django ajax应用

    ajax: 什么是ajax,有什么作用: 以前我们在页面向后台提交数据的时候都是使用from表单,这样的提交会在提交的时候将整个页面全部刷新,如果你在填写表单的时候提交之后发现某个数据不对,但是你已提 ...

  5. 配置Charles 设置手机代理并允许https请求

    前言: 在h5开发调试时,为实现手机app访问localhost地址,可以使用ip地址的方式,但一般公司app出于安全考虑,会限制只能访问其自有域名.因此,使用charles代理的方式 步骤 用手机代 ...

  6. vue2.0、vue3.0不同之处

    一.响应式赋值操作不同 Vue2.0 1.通过data返回对象做相应: 2.对复杂的对象或数组下的属性等深层次的改变需要通过$set的方式. Vue3.0 1.ref实现简单的实现响应,通过value ...

  7. 4、剑指offer——从尾到头打印链表java实现

    **题目描述** **输入一个链表,按链表从尾到头的顺序返回一个ArrayList.** 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32M,其他语言64M 思路:   1.如果链 ...

  8. 有状态 无状态 stateful stateless monolithic architecture microservice architecture 单体架构

    为什么游戏公司的server不愿意微服务化? - 知乎 https://www.zhihu.com/question/359630395 我大概说了,方便测试,方便维护,方便升级,服务之间松耦合,可多 ...

  9. VMware 虚拟机逃逸漏洞

    所谓虚拟机逃逸(Escape Exploit),指的是突破虚拟机的限制,实现与宿主机操作系统交互的一个过程,攻击者可以通过虚拟机逃逸感染宿主机或者在宿主机上运行恶意软件. 针对 VMware 的虚拟机 ...

  10. （Oracle）关于blob转到目标库报ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值错误解决方案

    在数据抽取时,开发需要clob类型的数据,但是目标库类型是blob类型的,于是抽取的时候报错: ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值错误 可能有以下几种原因: 可能有以下 ...