1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title></title>

  6     <style>

  7     .outer{

  8         border:10px red solid;

  9     }

 10     .inner{

 11         width:100px;

 12         height:100px;

 13         background-color:orange;

 14         float:left;

 15         /*

 16         高度塌陷的问题：

 17             在浮动布局当中，父元素的高度默认被子元素撑开

 18                 档子元素浮动后，其会脱离文档流，子元素会从文档流中>    脱离将会无法撑起父元素的高度，导致父元素的高度丢失

 19             父元素高度丢失后，其下面的元素会自动上移，导致页面布局>    混乱

 20             所以高度塌陷的问题是浮动布局中比较常见的问题，这个问题>    我们必须进行处理

 21

 22          */

 23     }

 24     /*

 25     BFC-块级格式化环境

 26         -BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC

 27             开启BFC该元素会变成一个独立的布局区域

 28         -元素开启BFC后的特点：

 29             1.开启BFC的元素不会被浮动元素锁覆盖

 30             2.开启BFC的元素子元素和父元素外边距不会重叠

 31             3.开启BFC的元素可以包含浮动的子元素

 32         可以通过一些特殊的方法来开启元素的BFC

 33             1.设置元素浮动

 34             2.将元素设置为行内块元素

 35             3.将overflow设置为非visible的值

 36                 -hiden/auto

 37      */

 38     </style>

 39 </head>

 40 <body>

 41     <div class="outer">

 42         <div class="inner"></div>

 43

 44     </div>

 45 </body>

 46 </html>

~

~

~

~

~

~

~

CSS浮动布局带来的高度塌陷以及其解决办法的更多相关文章

  1. CSS高度塌陷问题与解决办法

    问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...

  2. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  3. ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)

    ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...

  4. css浮动布局，浮动原理，清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  5. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  6. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

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

  7. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  8. CSS高度坍塌原因及解决办法

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...

  9. css中子元素浮动，无法自动撑开父元素的解决办法

    <div> <div style="float:left;">left</div> <div style="float:righ ...

随机推荐

  1. Docker--Image and Container

    2.1 深入探讨Image  说白了,image就是由一层一层的layer组成的. 2.1.1 官方image https://github.com/docker-library mysql http ...

  2. 洛谷p1725 露琪诺 单调队列优化的DP

    #include <iostream> #include <cstdio> #include <cstring> using namespace std; int ...

  3. 高阶类 & HOC & anonymous class extends

    高阶类 & HOC & anonymous class extends js 匿名 class extends / mix-ins / 多继承 高阶函数 HOF, 接收一个 funct ...

  4. codepen iframe theme id

    codepen iframe theme id iframe css theme demos See the Pen css margin collapsing (1. 相邻兄弟元素) by xgqf ...

  5. eyes protect app

    eyes protect app https://awaremac.com/

  6. 2020 front-end interview

    2020 front-end interview https://juejin.im/post/5e083e17f265da33997a4561 xgqfrms 2012-2020 www.cnblo ...

  7. postman 发送数组

    原文 users[]:aa users[]:22 object[] // { users: [ { name: ' "ajanuw"', pwd: ' "aaa" ...

  8. 如何在ASP.NET Core中编写高效的控制器

    ​通过遵循最佳实践,可以编写更好的控制器.所谓的"瘦"控制器(指代码更少.职责更少的控制器)更容易阅读和维护.而且,一旦你的控制器很瘦,可能就不需要对它们进行太多测试了.相反,你可 ...

  9. Python学习笔记_爬虫数据存储为xlsx格式的方法

    import requests from bs4 import BeautifulSoup import openpyxl wb=openpyxl.Workbook() sheet=wb.active ...

  10. Java volatile 关键字底层实现原理解析

    本文转载自Java volatile 关键字底层实现原理解析 导语 在Java多线程并发编程中,volatile关键词扮演着重要角色,它是轻量级的synchronized,在多处理器开发中保证了共享变 ...