CSS中的浮动和浮动的影响及消除
2019-07-15 本文已影响0人
追逐_chase
web.jpeg
1. 文档流
- 文档流在网页的底层，表示的事一个网页的位置
- 我们创建的元素默认都是处在文档流中
- 文档流的主要特点表现为
块级元素和- 块级元素
1.会
独占一行，自上向下排列2.默认的宽度是100% 3.默认的高度是内容的高度
- 行内元素
1.不会独占一行，根据内容的决定宽度 2.高度和宽度都是被内容撑开的
2.浮动 float
浮动的产生就是为了，解决块级盒子不在一行显示的情况
- 1.浮动
脱离文档流的，原来还在文档流的元素，会向上移动 - 元素浮动以后，会尽量向页面的左上或是右上漂浮，直到遇到
父元素的边框或者其他元素的浮动元素
- 元素浮动以后，会尽量向页面的左上或是右上漂浮，直到遇到
- 如果浮动的元素上边是一个没有浮动的块级元素，则浮动的元素不会超过块级元素
- 4.浮动的元素不会超过上边的兄弟元素
- 浮动会更改元素的显示方式 :
inline-block
- 浮动会更改元素的显示方式 :
脱标.png
浮动文字饶边.png
3.浮动中高度塌陷
<style>
.box{
border: 10px solid yellowgreen;
}
.sun{
width: 100px;
height: 100px;
background-color: burlywood;
float: left;
}
.box2{
height: 200px;
width: 300px;
background-color: aquamarine;
}
</style>
<body>
<div class="box">
<div class="sun"></div>
</div>
<div class="box2"></div>
</body>
image.png
在标准流中，子元素是可以撑开父元素的，但是上图中我们看到，
子元素浮动脱离标准流，使得父元素的高度为0，就是高度塌陷
3.1消除浮动带来的负面影响
方式一 开启BFC
在开发中，元素的塌陷会导致布局的变化，所以要避免这个情况，要清除浮动, 其实在页面中的元素都一个隐含的属性叫做:
Block Formatting Context简称：BFC
BFC有如下特点:
1.父元素的外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启
BFC?
我们只能间接的开启比如 ：
1.设置元素的浮动-使用这个方式，虽然可以撑开父元素，但是父元素的显示方式变化 inline-block，导致父元素的宽度丢失
2.设置元素的绝对定位
3.设置元素为inline-block
4.overflow:auto给父元素添加这个属性,这个影响比较小（但是在定位的时候就有影响）
所以
image.png
image.png
方式二 插入一个新的标签使用clear属性
<style>
.box1 {
border: 3px solid yellowgreen;
}
.sun1{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.sun2{
width: 200px;
height: 200px;
background-color:rebeccapurple;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: red;
}
.clear{
clear: both;
}
</style>
image.png
image.png
方式三 使用伪元素
使用伪元素的原理和 插入新的标签是一样的，不过使用伪元素，界面代码中不显示，插入的标签，提高代码的可读性
<style>
.box1 {
border: 3px solid yellowgreen;
}
.sun1{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.sun2{
width: 200px;
height: 200px;
background-color:rebeccapurple;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: red;
}
.clearfix:after{
/* 添加一个内容空白的 */
content: "";
/* 转化为块级元素 */
display: block;
/* 设置元素是否显示 */
visibility: hidden;
/* 高度为0 */
height: 0;
/* 行高为0 */
line-height: 0;
/* 清楚 */
clear: both;
}
.clearfix{
/* 兼容ie67浏览器 */
*zoom: 1;
}
</style>
<body>
<div class="box1 clearfix">
<div class="sun1"></div>
<div class="sun2"></div>
</div>
<div class="box2"></div>
</body>
image.png
双伪元素清楚浮动
<style>
.clearfix:before, .clearfix:after {
content: "";
display: block; /* 触发BFC 防止外边距合并 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
- 清除浮动
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
