CSS浮动布局带来的高度塌陷以及其解决办法
2024-09-05 00:11:56
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>
~
~
~
~
~
~
~
最新文章
- C#搭建足球赛事资料库与预测平台(1) 基本介绍
- cacti监控windows服务器
- Android SQLiteOpenHelper(一)
- Diy页面服务端渲染解决方案
- maven打的jars项目,log4j不会输出日志
- Jquery调用Webservice传递Json数组
- nodeJs事件之监听移除事件
- -_-#【乱码】URL中文参数
- Linux中gcc编译器的用法
- XHR
- beta版本复审
- MySQL数据类型DECIMAL用法
- Django web框架-----win10搭建django2.1.7开发环境,定义简易视图及网址
- Android NDK编译之undefined reference to &#39;JNI_CreateJavaVM&#39;
- radio选择
- html <;iframe>;介绍
- NIO完成网络通信(一)
- (转)postfix疯狂外发垃圾邮件之分析与解决
- EXCEL函数LookUp, VLOOKUP,HLOOKUP应用详解(含中文参数解释)
- .gitignore文件如何编写?
热门文章
- 云原生系列2 部署你的第一个k8s应用
- LeetCode 题解 593. Valid Square (Medium)
- GraphQL API In Action
- how to check website offline status in js
- egg.js 如何禁用 sensors data
- mui上拉刷新
- Mila Fletcher :其实高度自律的人生并没有那么难养成
- NGK八大板块:为何郊区市场近来火爆?-VALAITIS, PETER ANTHONY分析
- java高并发编程基础之AQS
- Ability之间或者进程间数据传递之对象(Sequenceable序列化)