float浮动副作用及其如何清除

最新推荐文章于 2023-06-22 08:30:00 发布

koukou0419

最新推荐文章于 2023-06-22 08:30:00 发布

阅读量536

点赞数

分类专栏：前端文章标签：浮动影响清除浮动 overflow clear float

本文链接：https://blog.csdn.net/koukou0419/article/details/90694465

版权

前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

1.浮动float产生的影响？

1.脱离标准文档流，不占页面位置,元素也不再具有自己本身的属性(如span不再具有行内元素特点) 
2.文字环绕，设置浮动属性的初衷
3."贴边"现象，设置浮动属性后，首选找有浮动盒子的边找到了就会贴到浮动盒子的边上，若找不到，则找父元素的边
4.收缩现象，只显示内容的宽度，
5.撑不起盒子的高度

float浮动：css样式表中用float来表示，它有

属性值	描述
none	表示不浮动，所有之前讲解的HTML标签默认不浮动
left	左浮动
right	右浮动
inherit	继承父元素的浮动属性

?：浮动的span不再是行内元素

span标签设置float值不为none时候 span不再是标准文档流，没有行内元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    span{
        width:200px;
        height:200px;
        border:1px solid red;
        float:left;
    }
      
    </style>
</head>
<body>
    <span>例子</span>
</body>
</html>

3.父元素如何清除浮动子元素的影响

浮动之后，导致父盒子高度塌陷会导致我们整个网页的布局紊乱

Clear:both
Overflow:hidden 那么当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域


1.给父元素设置固定宽高(不灵活，后期不易维护)
2.内墙法：给最后一个浮动元素的后面添加一个空的【块级标签】，并且该属性clear:both
3.伪元素清除法 clear:both
4.overflow:hidden

clear

<div class="parent clearfix">
        <div class="child1">child1</div>
        <div class="child2">child2</div>
 </div>

#css样式
.parent{
           border:1px solid red;
       }
       .child1{
           width:100px;
           height:100px;
           border:1px solid orange;
           float:left;
       }
       .child2{
           width:100px;
           height:100px;
           border:1px solid blue;
           float:right;
       }
       .clearfix::after{   #伪元素设置
           content:'';
           display:block;
           clear:both;
           /* visibility: hidden;
           height: 0; */

       }

Overflow：那么当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域

.parent{
           border:1px solid red;
           overflow: hidden   #给父级盒子设置overflow:hidden
       }
       .child1{
           width:100px;
           height:100px;
           border:1px solid orange;
           float:left;
       }
       .child2{
           width:100px;
           height:100px;
           border:1px solid blue;
           float:right;
       }

3.overflow属性

overflow:hidden

那么当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域

属性值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容不可见
scroll	内容会被修剪，浏览器会显示滚动条以便查看其余内容
auto	由浏览器定夺，如果内容被修剪，就会显示滚动条
inherit	规定从父元素继承overflow属性的值

一旦设置box盒子设置overflow(除了overflow:visible);他会形成BFC布局规则
计算BFC的高度时候，浮动元素也会参与计算，但是小心overflow:hidden 他有自己的本意
BFC有自己的布局规则，他会让内部浮动元素计算高度

koukou0419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float浮动副作用及其如何清除

1.浮动产生的现象？1.脱离标准文档流，不占页面位置2.文字环绕，设置浮动属性的初衷3."贴边"现象，设置浮动属性后，首选找有浮动盒子的边找到了就会贴到浮动盒子的边上，若找不到，则找父元素的边4.收缩现象，只显示内容的宽度，5.撑不起盒子的高度3.父元素清除子元素产生的浮动影响？1.给父元素设置固定宽高(不灵活，后期不易维护)2.内墙法：给最后一个浮动元素的后面添加一个空的【块级...
复制链接

扫一扫