css关于浮动的高度塌陷

时间：2022-01-30 12:54:54
 <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>BFC</title>

      <style type="text/css">

          .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

          .div2 {background-color: #EAFFD0; width: 200px; height: 100px;}

          .div3 {background-color: #95E1D3; width: 200px; height: 100px;}

     </style>

 </head>

 <body>

     <div class="div1">div1</div>

     <div class="div2">div2</div>

     <div class="div3">div3</div>

 </body>

 </html>

css关于浮动的高度塌陷

清除内部浮动

当一个标准流中的盒子中所有的子元素都进行了浮动，并且没有给盒子设置高度时，那么这个盒子的整个高度就会塌陷，什么意思呢，看下面的例子。

 <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>BFC清除内部浮动</title>

      <style type="text/css">

          .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;}

          .parent {width: 300px; border: 1px solid #95E1D3;}

      </style>

 </head>

 <body>

     <div class="parent">

         <div class="child"></div>

         <div class="child"></div>

     </div>

 </body>

 </html>

css关于浮动的高度塌陷

父集的被两个子div撑起来了，现在给child添加浮动

css关于浮动的高度塌陷

css关于浮动的高度塌陷

这个时候，父容器变成了2条重合的线了，也就是高度变为0了，即所说的高度塌陷。这是因为parent在计算高度时，parent内部的浮动元素child也会参与计算。

我们将父集浮动起来，

css关于浮动的高度塌陷

css关于浮动的高度塌陷

可以看出浮动父集元素解决了高度塌陷的问题。

css关于浮动的高度塌陷的更多相关文章

  1. css float父元素高度塌陷

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

  2. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  3. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

  4. 浮动引发的高度塌陷问题及其解决方法&lpar;BFC相关概念及性质&rpar;

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  5. html高度塌陷问题解决

    高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠    开启BFC的元素不会被浮动元素所覆盖    开启BFC的元素可以包含浮动的子元素 如何开启 ...

  6. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  7. CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）

    CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; p ...

  8. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. CSS高度塌陷

    问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...

随机推荐

  1. 札记：Fragment基础

    Fragment概述 在Fragment出现之前,Activity是app中界面的基本组成单位,值得一提的是,作为四大组件之一,它是需要"注册"的.组件的特性使得一个Activit ...

  2. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码（百度首页搜索录入框及登录链接）

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

  3. wpf 制作播放视频的屏保程序、而且能分屏显示

    这个程序用到了WPF里  “visual_Brush”(主要是为了实现分屏显示) , “UserControl” ,这两个知识点: 在屏保状态下播放指定文件夹下的视频,而且能分屏显示: 把编译好的屏保 ...

  4. Activity之onWindowFocusChanged

    public void onWindowFocusChanged (boolean hasFocus) 参数hasFocus: the window of this activity has focu ...

  5. selenium实现自动下载文件

    #coding:utf-8'''说明:导出'''from selenium import webdriverfrom public.highlightElement import highlightf ...

  6. prometheus — nginx-vts-exporter

    参考文档: https://blog.51cto.com/xujpxm/2080146 注: 本文留用自己参考,建议看以上参考文档,更为细致 prometheus 监控 nginx 使用 nginx- ...

  7. Github Upload Large File 上传超大文件

    Github中单个文件的大小限制是100MB,为了能突破这个限制,我们需要使用Git Large File Storage这个工具,参见这个官方帖子,但是按照其给的步骤,博主未能成功上传超大文件,那么 ...

  8. Linux 创建虚拟机，配置网卡，桥接，连接XShell

    一.新建虚拟机 1.“root”    输入密码: 2.看虚拟机的IP地址 “ifconfig” 二.配置网卡 1.更改设置(打开vim编辑) “vim /etc/sysconfig/network- ...

  9. OpenStack 存储服务 Cinder介绍和控制节点部署（十五）

    Cinder介绍 OpenStack块存储服务(cinder)为虚拟机添加持久的存储,块存储提供一个基础设施为了管理卷,以及和OpenStack计算服务交互,为实例提供卷.此服务也会激活管理卷的快照和 ...

  10. 【CF827E】Rusty String 调和级数&plus;FFT

    [CF827E]Rusty String 题意:给你一个01串,其中部分字符是'?',?可以是0或1,求所有可能的d,满足存在一种可能得到的01串,在向右移动d格后与自己相同. $n\le 5\tim ...

相关文章