浮动与定位

1.浮动

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动

元素浮动后不占位置，脱离文档流，但不会脱离文本流，离他最近的文字会环绕他

<style> .box {
    
    /* overflow: hidden; */
}

.box::after {
    
    content: "";
    display: block;
    clear: both;
}
.red {
    
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
/* 不过如果使用绝对定位之后，元素既会脱离文档流，也会脱离文本流 */
.green {
    
    float: left;
    width: 100px;
    height: 100px;
    background: green;
}
.blue {
    
    float: left;
    width: 100px;
    height: 100px;
    background: blue;
}
.footer{
    
    width:400px;
    height:200px;
    background:pink
}

.both {
    
    /* clear: both; */
}
</style>

<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="both"></div>
    <!-- <p>CSS 有三种基本的定位机制：普通流（文档流）、浮动和绝对定位。</p> -->
</div>
<div class="footer"></div>

1.1 清除浮动

1.给父元素加高度

.box{
    
	height:100px;
}

2.设置父元素overflow:hidden

.box{
    
	 overflow:hidden
}

3.父级定义 伪元素::after

.box::after {
    
    content: "";
    display: block;
    clear: both;
}

4.结尾处加空div，或是给受影响的元素加clear:both

.both {
    
    clear: both;
}

1.2 触发BFC

BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

一个盒子不设置height时，当内容元素都浮动时，无法撑起自身，故需要创建BFC来避免此种情况
如何创建BFC：
1.float不为none
2.position为fixed或absolute
3.display的值是inline-block、flex或者table
4.overflow不为visible

BFC的其他作用：
1.可以取消盒子的margin塌陷；
2.可以阻止元素被浮动元素覆盖。

2.定位

子元素相对父元素定位指的是子元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位，若所有父元素都没有定位，则依据body根元素(浏览器窗口)进行定位。