【浮动笔记】

目录

浮动语法

浮动特性

网页布局准则

清除浮动

为什么要清除浮动

清除浮动的本质

清除浮动语法

清除浮动方法

---

浮动语法

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘 

float:（none/left/right）

浮动特性

设置了浮动的元素会脱标(脱离标准流)，并且浮动的盒子不再保留原先的位置。

脱标：设置了浮动的元素，漂浮在普通流的上面，不占位置，脱标。

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素的特性。

如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度。

如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来决定。

浮动的盒子中间是没有缝隙的，是紧挨在一起的。

网页布局准则

网页布局第一准则：先用标准流父级元素排列上下位置，之后内部子元素采取浮动排列左右位置

网页布局第二准则：先设置盒子大小，后设置盒子的位置

清除浮动

为什么要清除浮动

由于父级盒子很多情况下，不方便给高度（希望父盒子高度随子盒子数量的增加而增加），但是子盒子浮动又不占有位置，导致父盒子无法被浮动的子盒子撑开，最后父级盒子高度为0时，就会影响下面的标准流盒子（标准流盒子被浮动的盒子遮盖）。

1.父级没有高度

2.子盒子浮动

3.影响下面的布局，所以要清除浮动

清除浮动的本质

清除浮动之后，父级就会根据浮动的子盒子自动检测高度

清除浮动语法

选择器{clear:属性值；}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear:both

清除浮动方法

1.额外标签法

额外标签法会在浮动元素末尾添加一个空的标签(这个新的空标签必须是块级元素)。例如

<div style="clear:both"><div>

2.父级添加overflow属性

overflow:hidden;

3.父级添加after伪元素

为父级添加以下css代码

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    
}
.clearfix{
    *zoom:1;
}

4.父级添加双伪元素

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfixafter{
    clear:both;
}
.clearfix{
    *zoom:1;
}