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. codeforces 868C

    C. Qualification Rounds time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  2. sentry.event & UnhandledRejection & promise rejection

    sentry.event & UnhandledRejection & promise rejection Non-Error promise rejection captured s ...

  3. git commit guidelines

    git-commit-guidelines AngularJS Development Setup Running Tests Coding Rules Commit Message Guidelin ...

  4. Vue 3.x & v-model

    Vue 3.x & v-model https://v3.vuejs.org/guide/migration/v-model.html#overview BREAKING: When used ...

  5. React Hooks: useLayoutEffect All In One

    React Hooks: useLayoutEffect All In One useLayoutEffect https://reactjs.org/docs/hooks-reference.htm ...

  6. style element & web components

    style element & web components style.textContent style.setContent bug style.textContent const st ...

  7. Open Collective

    Open Collective Open Collective is an online funding platform for open and transparent communities. ...

  8. Scratch 游戏开发

    Scratch 游戏开发 可视化少儿编程 https://scratch.mit.edu/ Scratch Desktop https://scratch.mit.edu/download https ...

  9. vs code & macOS services

    vs code & macOS services Mac OS X, Open Folder With VS Code (right click) https://github.com/Mic ...

  10. Object to Array

    Object to Array objectToArray(obj = {}, title = `标题`){ let datas = []; if(Object.keys(obj).length) { ...