(13) css浮动补充

最新推荐文章于 2022-11-21 23:03:04 发布

泽哥ins

最新推荐文章于 2022-11-21 23:03:04 发布

阅读量149

点赞数

分类专栏： CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/qq_36213140/article/details/121685042

版权

CSS3 专栏收录该内容

53 篇文章 5 订阅

订阅专栏

一、字围现象

与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住黄绿盒子的一部分，但是文字内容不会被盖住，蓝色盒子中的文字会让开蓝盒子位置，围绕它进行加载。这种效果称为字围现象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css浮动让出标准流的位置</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
        .p1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .p2 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1"></p>
        <p class="p2">123文字内容123文字内容123文字内容123文字内容123文字内容123文字内容123文字内容123文字内容123文字内容123文字内容123文字内容</p>
    </div>
</body>
</html>

可以利用字围现象制作一些特殊的图文混排布局效果：

二、浮动带来的问题1

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

示例：没有添加浮动，普通标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css浮动带来的问题</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
       .box {
           width: 1000px;
           border: 1px solid #000;
       }
       .box p {
           width: 100px;
           height: 100px;
           margin-right: 10px;
           background-color: skyblue;
       }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

当我们给div盒子里面所有的p元素，添加左浮动后，会出现如下问题。

三、浮动带来的问题2

父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css浮动带来的问题</title>
    <style>
        body,div,p {
            margin: 0;
            padding: 0;
        }
       .box {
           width: 1000px;
           border: 10px solid #000;
       }
       .box p {
           float: left;
           width: 100px;
           height: 100px;
           margin-right: 10px;
           background-color: skyblue;
       }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

四、清除浮动的方法

4.1给标准流的父元素强制给一个合适的高度

解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。

问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

4.2通过clear属性进行清楚浮动

clear清除的作用：清除标签元素自身受到的前面的浮动元素的影响。属性值：

left 清除前面左浮动带来的影响
right 清除前面右浮动带来的影响
both 清除前面所有浮动带来的影响

给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。

clear: both; 解决问题：浮动元素影响后面元素标准流位置和贴边。

没有解决的问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。

4.3通过隔墙法清除浮动

4.3.1外墙法

在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear： both 属性。

外墙法解决了：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。

没有解决问题：父元素没有高度自适应。

4.3.2内墙法

在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0，添加 clear 属性。

内墙法解决了：父元素高度自适应，浮动影响后面的元素位置和贴边。

缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。

4.4通过伪类清除浮动

本质是使用伪类方法利用css代码书写一堵内墙。伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。 :after：这个伪类表示选中的是某个标签内部的最后的位置。书写方法：前面必须加普通的选择器，后面连续书写伪类名称。将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。