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. PAT L2-004. 这是二叉搜索树吗？【前序遍历转化为后序遍历】

    一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点, 其左子树中所有结点的键值小于该结点的键值: 其右子树中所有结点的键值大于等于该结点的键值: 其左右子树都是二叉搜索树. 所谓二叉搜索 ...

  2. mysql 索引类型以及创建

    明天就去面浦发了,感觉对数据库有些忘了,时间紧迫,就直接把链接贴这了,有空再整理. 参考: 1. https://www.cnblogs.com/crazylqy/p/7615388.html

  3. window.navigator All In One

    window.navigator All In One navigator "use strict"; /** * * @author xgqfrms * @license MIT ...

  4. CSS multi colors circle

    CSS multi colors circle <!DOCTYPE html> <html lang="zh-Hans"> <head> < ...

  5. holy shit CSDN

    holy shit CSDN 垃圾 CSDN 到处都是垃圾文章, 无人子弟 到处都是垃圾广告,看的恶心 毫无底线,窃取别人的知识成果,毫无版权意识 垃圾爬虫,垃圾小号 ...等等 Google Sea ...

  6. NGK生态商城即将上线官网，推动生态落地应用

    NGK生态商城即将上线官网,以推动生态落地应用.此举意味着NGK生态将跻身区块链顶尖之列,同时,NGK代币.NGK Dapp游戏 "呼叫河马" 以及NGK DeFi项目Baccar ...

  7. 通过setMouseTracking实现用鼠标拖动控件

    1 import sys 2 from PyQt5.Qt import * 3 4 class Mwindow(QWidget): 5 leftclick = False 6 7 def __init ...

  8. 14_MySQL条件查询

    本节所涉及的sql语句: -- 去除结果集中的重复记录 SELECT job FROM t_emp; SELECT DISTINCT job FROM t_emp; SELECT DISTINCT j ...

  9. Fatal error in launcher Unable to create process using 'dapppythonpython37python

    Fatal error in launcher: Unable to create process using '"d:\app\python\python37\python.exe&quo ...

  10. Springboot项目架构设计

    导航 前言 流水线 架构的艺术 项目架构 理解阿里应用分层架构 superblog项目架构 结语 参考 本节是<Spring Boot 实战纪实>的第7篇,感谢您的阅读,预计阅读时长3mi ...