css浮动布局清除浮动

2021-05-10 22:35:02发布

【浮动定义】

  1. 浮动元素会脱离标准流(脱标)。

  2. 浮动会一行内显示,并和其他元素对齐,在以下空间中。

  3. 浮动元素会具有行内块元素的特性,都加了浮动,可以在一行并排显示。

  4. 加了浮动盒子会飞,下面的盒子就会占有会飞盒子的位置,继而加浮动的盒子会压住下面的盒子

  5. 两个盒子加了浮动都会飞,那就顶端进行一行排序(父元素一定要有宽高)

  6. 行内块加上浮动,他就具有行内块元素特质。

  7. 加上浮动的元素,没有设置宽度,是根据你内容多少来决定宽度的。

  8. 加了浮动是没有缝隙的

  9. 浮动只会影响下面的元素浮动

  10. 浮动元素经常和父级元素搭配使用

  11. 标准流父盒子 > 子元素加浮动 > 先准备一个大盒子居中,在准备几个浮动子元素对齐

  12. ul 做大盒子,li做小盒子


【浮动css写法】

.fl {
   float: left;
}

.fr {
   float: right;
}


清除浮动

推荐伪元素清除浮动(推荐)

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
/*父级太添加伪元素*/

百度清楚浮动的样式

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

.clearfix::after {
    *zoom: 1;
}
/*父级太添加伪元素*/

多余的部分会被切掉

overflow: hidden;
/*父级添加代码*/
TAG标签:

登录 后发表评论
0条评论
还没有人评论过~