CSS浮动布局带来的高度塌陷以及其解决办法
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浮动布局带来的高度塌陷以及其解决办法的更多相关文章
- CSS高度塌陷问题与解决办法
问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)
ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...
- css浮动布局，浮动原理，清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
- Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
- 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...
- CSS浮动布局与菜单栏设计
公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...
- CSS高度坍塌原因及解决办法
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...
- css中子元素浮动，无法自动撑开父元素的解决办法
<div> <div style="float:left;">left</div> <div style="float:righ ...
随机推荐
- springboot项目打war包
spring官方教程地址(包含打war包和打jar包的):https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#b ...
- 微信小程序开发抖音去水印功能
之前找了很多抖音去水印的工具全是广告,所以索性自己写了一个,提供给大家免费试用以下是微信小程序的二维码 使用教程: 1.打开微信搜索小程序:沸点软件技术服务 2.打开沸点软件技术服务小程序 3.去抖音 ...
- php性能分析利器：xhprof
xhprof是facebook团队开发的用于研究php性能的扩展,并且提供了图形化的界面展示性能参数和过程.对于各种php的项目的性能瓶颈研究有一定帮助,值得一用. 我在上一篇<Dockerfi ...
- Media Queries语法总结
Media Queries的语法如下所示: @media [media_query] media_type and media_feature 使用Media Queries样式模块时都必须以&quo ...
- 正则表达式 js 怎么获取匹配的变量
正则表达式 js 怎么获取匹配的变量 $0 ~ $9 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- js 构造函数 & 静态方法 & 原型 & 实例方法
js 构造函数 & 静态方法 & 原型 & 实例方法 ES5 "use strict"; /** * * @author xgqfrms * @licens ...
- MDN Browser Compatibility Report 2020
MDN Browser Compatibility Report 2020 top pain point https://mdn-web-dna.s3-us-west-2.amazonaws.com/ ...
- CORS All In One
CORS All In One 跨域资源共享 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS CORS 请求类型 简单请求 预检请求 Ac ...
- 一个最简单 node.js 命令行工具
一个最简单 node.js 命令行工具 node.js cli $ node cli.js xyz # OR $ node cli xyz 接受参数 process.argv js "use ...
- Learn-JavaScript-with-MDN 系列文章: 01. var & let & const 对比
Learn-JavaScript-with-MDN 系列文章: 01. var & let & const 对比 var & let & const 区别 https: ...