CSS-----浮动带来的影响及解决办法

最新推荐文章于 2023-03-05 17:01:22 发布

XCharazz

最新推荐文章于 2023-03-05 17:01:22 发布

阅读量365

点赞数

分类专栏： web学习知识点文章标签： html css

本文链接：https://blog.csdn.net/zxq144/article/details/110914531

版权

web学习知识点专栏收录该内容

36 篇文章 1 订阅

订阅专栏

布局第二大块盒模型行内块

行内块并排缺点：

中间有间距
文本内容行数多少不一样的时候会出现对不齐现象

浮动属性

作用：专业解决并排

float: left左侧浮动/right右侧浮动/none不浮动;
float:none;默认值  标准状态

标准流 浏览器解析块元素从上到下一行一个垂直排列行内元素并排中间有间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cRafAEU-1607447845637)(media/标准流.png)]

浮动特点：

浮动只有水平移动在父盒子区域内部进行左右移动

float:left 靠近父盒子左侧边界 right 靠近父盒子右侧边界
浮动元素脱离标准流，不占据界面位置—》形成浮动流
浮动破坏标准流但是不影响文本流
浮动元素遇到浮动元素立即停止浮动（并排）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UeGsgky0-1607447845639)(media/浮动的影响.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFLjk4z9-1607447845640)(media/浮动影响02.png)]

浮动—》想要并排—》但是浮动子元素形成浮动流，不占据位置导致—》父盒子高度变为height:0 (高度塌陷)

本质原因：浮动元素不参与高度计算

清除浮动带来的影响

给父盒子定高度

缺点：不实际实际问题就是有时候父盒子高度不确定 auto
给父盒子加overflow:hidden属性

overflow:hidden—》触发BFC规则：有一条如果这个盒子是BFC盒子那么这个盒子里的浮动子元素也会参与高度计算

缺点：overflow:hidden1.溢出隐藏。切掉 2. 触发形成BFC盒子

会把我们故意想要溢出的盒子切掉
专门用于清除浮动影响的属性
```
clear:both/left/right;

只有块类型的元素才能清除浮动带来的影响
<div style=" clear:both;"></div>
```
这个属性放在父盒子里加在最后一个浮动子元素的后面作为父盒子的内容存在

缺点：结构冗杂（真的标签没有展示有效数据，空元素）
最终方案双伪元素清浮动法

清楚浮动影响的类哪个父盒子的子元素浮动了那么就给这个父盒子加这个类

 .clearfix::after {
            content: '';
            /* 清除浮动影响的必须是块类型 */
            display: block;
            clear: both;

        }
 .clearfix::before{
            content: '';
            /* 清除浮动影响的必须是块类型 */
            display: block;
            clear: both;

        }

伪元素单双冒号都对只不过高版本浏览器两个都支持低版本浏览器不支持:: ie8及其以下不支持::

伪元素

真元素真标签真的写到body真的是一个<>

伪元素：用css创造出来的元素

伪元素创造出来以后默认是行内类型

前伪元素

E:before {
    content:'';//写这个元素的文本
    
}
作用：创造一个元素插入到E元素的所有内容之前（创造的元素是E的第一个子元素）

后伪元素

E:after {
     content:'';//写这个元素的文本
    
}
作用：创造一个元素插入到E元素的所有内容之后（创造的元素是E的最后一个子元素）

浮动对于元素类型的影响

行内 + float:left/right —> 不区分元素类型全部都是密闭私有的独立的区域(BFC盒子)

行内块 + float:left/right —> 不区分元素类型全部都是密闭私有的独立的区域(BFC盒子)

块元素 + float:left/right —> 不区分元素类型全部都是密闭私有的独立的区域(BFC盒子)

 i {
            display:block;//这句代码就非常没有必要了，对吗？？？
            width: 20px;
            height: 20px;
            background-color: #ccc;
            float: left;
            margin-left: 10px;
        }


    </style>
</head>
<body>

    <i></i>
    <i></i>
    <i></i>
    <i></i>

最初解决的问题—图文环绕（了解）

t;
margin-left: 10px;
}

</style>

<i></i>
<i></i>
<i></i>
<i></i>






## 最初解决的问题---图文环绕（了解）

XCharazz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-----浮动带来的影响及解决办法

布局第二大块盒模型行内块行内块并排缺点：中间有间距文本内容行数多少不一样的时候会出现对不齐现象浮动属性作用：专业解决并排float: left左侧浮动/right右侧浮动/none不浮动;float:none;默认值标准状态标准流浏览器解析块元素从上到下一行一个垂直排列行内元素并排中间有间距[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cRafAEU-1607447845637)(media/标准流.png)]浮动特
复制链接

扫一扫