0018 认识css 标签浮动 解决父级塌陷

目录

01 浮动的特性

浮动的原则  
1>标准文档流和浮动文档流可以类比，上下两层页面，标准文档流占据底下一层，浮动文档流占据上一层，

2> 标准文档流上下依次渲染显示，不受浮动文档流的位置影响，就算文档流的标签在浮动标签下面时，也会贴近文档流，浮动文档流会覆盖文档流。

3> 当文档流的标签在浮动流上面时，浮动流一定在文档流下一行。

4>浮动文档流，一个标签沾满一行后，另一个浮动标签自动递补下一行，

5>上层和下层可以相互

float = left 左浮动  right 右浮动

image-20230305225522347

02 字围效果

如果标签的属性被设置成了浮动了，那么红色块的文字，应该被黄色块盖住，
但是并没有被盖住，而是挤到了文本流的空白处。
image-20230306000429049 
1.浮动效果中的字围现象。图片和文件在一个盒子内显示的时候，因为都是内联标签在一行中显示内容
所以图片和文字会被分割展示，字围的效果就是文字会自动围绕在图片周围，不会覆盖到文档流内的数据。
说明浮动是半浮动和文档流有部分关系的。

image-20230306012918244

父级塌陷的原因

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>


    <style>

        .c1 {
            border: red 1px solid;
        }
        .c2{
            width: 100px;
            height: 60px;
            background: yellow;
            float: left;
        }
        .c3{
            width: 100px;
            height: 60px;
            background: blue;
            float: right;
        }
        .c4{
            width: 100px;
            height: 60px;
            background: blueviolet;
            float: left;
        }
        .c5 {
            width: 80%;
            height: 300px;
            border: orange 3px solid;
        }

    </style>
</head>
<body>

<div class="c1">
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>

<div class="c5">123</div>

</body>
</html>
image-20230306015622967 
盒子模型中父级塌陷的原理，因为盒子标签的的长宽是跟随下级标签自适应的，当所有的下级标签都被浮动时
那么父级标签作为文档流标签的存在没有下级标签的长度可以取用，默认是一根线。在文档流的一层最顶端相当于空的。

当另外一个标签是文档流标签时，默认是顶到上级文档流标签后面的，那么上个盒子内的浮动文档流会覆盖下个盒子
的内容，要想让下个文档流排在上个文档流的下面，就必须在上个文档流的最下面设置一个文档流标签。

在一个盒子内标准文档流和浮动文档流只有在排布的时候能影响，标准文档流在盒子最后能影响到浮动文档流。
使用一个属性的clear让一个标签的左右都没有浮动标签，本身都是处在标准文档流一层，隔绝了下个盒子的覆盖问题，
解决父级塌陷问题，让本盒子内的浮动标签处于自己的上面。

使用清除浮动

clear 属性的意思 我这个便签的作用不能出现浮动元素，，清除浮动的效果只能作用到先排布的标签上，后面的管不到  
clear ：both 左右清除浮动只能校验上一个标签在左，还是在右。 ，但是下一个标签如果浮动的方向和上一个标签一致，还是会紧挨着上一个标签的，both不起作用。


clear：left  清除浮动，上一个标签在左的话，自动排布到下一行
clear：right  清除浮动上一个标签在右的，自动排布到下一行

image-20230306021654378

1、解决父级塌陷的方式1

给父级div 设置一个高度，包裹子级 标签， 但是方式过于单一 ，数据写死了。不方便修改

image-20230306201717816

1、解决父级塌陷的方式 2

为父级标签设置一个文档流标签，并且是作为最后一个标签
： 根据浮动特性，浮动标签一定排在文档流标签的后面，可以解决 c5标签不会上浮到 c1的范围内。
在为文档流标签设置一个clear属性both ，让其左右不存在浮动标签。
： 根据特性，游览器排布是从上到下，c0就可以左右他的兄弟标签。又利用文档流的特性，影响了他下面的浮动标签。

完美解决塌陷的问题。

image-20230306202516532

1、解决父级塌陷的方式 3

通过伪类选择器，在父级标签内生成一个块级标签，属性clear等于both

设置一个css选择器，专门处理塌陷的问题，把选择器加入到标签内即可。
content
image-20230306204709093
posted @ 2023-03-06 19:31  mmszxc  阅读(59)  评论(0)    收藏  举报