博客探讨了在网页开发中遇到的高度塌陷问题，即浮动元素无法撑开父元素导致的问题。介绍了BFC（块级格式化上下文）的概念和作用，如防止元素覆盖、避免外边距重叠并包含浮动元素。文章列举了创建BFC的几种方式，如浮动、display属性和overflow属性，并提到了clear布局以及如何利用伪元素解决重叠问题。此外，还介绍了clearfix技巧来一次性解决浮动元素带来的问题。
1.啥叫高度塌陷？？
因为在做开发时，网页的页面不一定是固定的，我们肯定希望有多少内容框框就有多大。块元素当然满足我们的需求；但是块元素没办法水平布局。
块元素撑开父类
那是不是只要把浮动元素设置一下，让它也可以撑起父元素nei。答案是不可以；
如果想让浮动元素撑开父类会有什么样子的后果nei---高度塌陷；父元素顶不住了
解决方法：将父元素设置成BFC；
- 开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点：
- 不会被浮动元素覆盖
- 父子元素外边距不会重叠
- 可以包含浮动的元素
最后一条最为重要！！！！！！！！！！！！！
设置BFC的方法：
1.大家都是float
.tala{
border:3px red solid;
float: left;
}
.ckai{
width:50px;
height: 50px;
background-color: greenyellow;
float:left;
}
弊端：直接缩了
2. 设置display：inline-block
也行但是会产生间距
3.设置overflow：hidden
效果挺棒！！！！！！！
弊端：
<style>
.tala{
width:100px;
height: 100px;
background-color: red;
float: left;
}
.hhah{
overflow: hidden;
width:50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="tala"></div>
<div class="hhah"></div>
</body>问题：
clear布局
clear很简单的一个想法就是不让浮动的元素遮住自己；这是一种什么思想nei？
如果加入了clear；则表现为
当然clear有几种参数不难理解
clear：left 不被左边的浮动遮住
clear：right 不被右边的浮动遮住
clear：both不被最大的那个浮动遮住
有了浮动的思想我们可以结合之前学的伪元素对知识点进行更新；
.tala::after{
content: '';
clear: both;
display: block;
}这样相当于也把其撑起来了；
谈到伪元素，其对子父元素重叠的问题也能解决了
啥叫重叠呢？就是子元素设置margin因为和父元素重叠两个就一起往下跑，怎么解决，比较简单用到的是：：before；
在父元素前加一个before两个不就隔开了
当然设置display：block没有用，因为没有高度这样就变成三个家伙黏在一起了
咋解决：
display:table这样就完美解决了这个问题！！！！
当然现在引入一个新的定义：clearfix
.clearfix::after,.clearfix::before{
content:'';
display:table;
clear: both;
}这样直接一劳永逸！！！！！！
扫一扫
2565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
