[前端笔记004]CSS布局之浮动与高度塌陷 -- float

资源

• 推荐zeal:离线文档查看器 https://zealdocs.org/
• 推荐w3c:线上文档 https://www.w3school.com.cn/
• 本笔记参考视频，尚硅谷:BV1XJ411X7Ud
• 我的笔记：https://gitee.com/plusmile/stackedit-app-data.git
• 我的CSS文件：https://gitee.com/plusmile/front-code.git,练习为00-练习/04-W3C导航条,html

浮动介绍

• 浮动可使元素在父元素中向左或向右移动，有点像左对齐，右对齐
• float属性可选值：
  1. none，默认值，元素不浮动
  2. left 元素向左浮动
  3. right 元素向右浮动
• 注意：
  1. 元素设置除none外的浮动后，水平布局的等式便不需要强制成立，即margin-right不需要补齐父元素宽度了。
  2. 设置浮动后，会完全从文档流中脱离，文档流其他元素会向上移动
  3. 不会从父元素中移出，不会覆盖前面的浮动元素，高度不会超过不浮动的元素和前面的浮动元素(看body中的位置)
• 元素脱离文档流后的特点：
  1. 不再独占一行，高度宽度被内容撑开
  2. 行内元素可以设置宽高了
  3. 不在区分块元素和行内元素
  4. 怎么感觉变成了行内块元素

.box1{
	background-color: #bfa;
	float: left;
}
.box2{
	width: 300px;
	height: 300px;
	background-color: orange;
	/* 加上浮动完成水平布局，不加会重叠，但不会盖住文字，这样就可以完成文字环绕效果 */
	float:left;
}

.s1{
	width: 300px;
	height: 300px;
	background-color: salmon;
	/* 行内元素可以设置宽高了 */
	float:left;
}
<div style="height: 200px;">
	<div class="box1">hello</div>
	<div class="box2"></div>
	<span class="s1">这里是span</span>
</div>

高度塌陷

• 布局中的大块的高度不写死，防止内容的变动，于是在里面再加个高度写死的div，此时，父元素会被此div撑开，但将此div设置为float时，会出现高度塌陷问题，无法撑开父元素
• 解决方法：
  1. 开启BFC,BFC全称block formatting context 块级格式化环境
     • BFC为CSS中的一个隐含属性，开启BFC后元素会变成一个独立的布局区域
     • 开启后的特点：
       1. 不会被浮动元素覆盖
       2. 子元素和父元素的外边距不会重叠
       3. 可以包含浮动的子元素
     • 开启方法：
       1. 使用float（不推荐）
       2. 使用display:inline-block（不推荐）
       3. 使用overflow:hidden，代价小,可用
  2. 最佳方法：使用::after+clear的方式在父元素的最后加上不受浮动元素影响的元素，clear会在下面介绍。
     • 例子：.out::after{content:'';clear:both;}

.out{
	margin-top: 100px;
	border: 10px red solid;
	/* 清除塌陷的方法之一 */
	overflow: hidden;
}
.in{
	width: 100px;
	height: 200px;
	background-color: #bfa;
	/* 设置浮动后出现高度塌陷问题 */
	float: left;
}

<div class="out">
	<div class="in"></div>
</div>

clear

• clear作用：清除浮动元素对当前元素所产生的影响
• 可选值：
  1. left:清除左侧浮动元素对当前元素的影响
  2. right:清除右侧浮动元素对当前元素的影响
  3. both:清除两侧浮动影响最大的影响
  4. 例子：clear:both
• 引申出解决边距重叠的最佳方法
  1. 使用::before+display解决外边距重叠，在元素前加个元素使其不重叠

.box1::before{
	content:'';
	display:table;/*设置为table不占地方*/
}

最佳通用类clearfix

可以即解决浮动影响，又解决边距重叠问题

.clearfix::before,.clearfix::after{
	content:'';
	display:table;
	clear:both;
}