浮动问题

最新推荐文章于 2022-07-13 16:42:08 发布

白菜白菜白了个白

最新推荐文章于 2022-07-13 16:42:08 发布

阅读量234

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_46540404/article/details/106486249

版权

1.浮动的子元素没法把未设置高度的父元素撑开；要想把父元素撑开给父元素设置高度或者给父元素加样式overflow: auto 表示溢出对于超出边界的元素可以进行相应的调整;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 20%;
            background-color: black;

        }
        .b{
            width: 60%;
            background-color: pink ;

        }
        .c{
            width: 20%;
            background-color: orangered;

        }
        .a,.b,.c{
            height: 200px;
            float: left;
        }

        .father{
            background-color: yellow;
            /*height: 400px;*/
            border: 1px solid blue;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
</body>
</html>

2.clear：left 表示该元素不受左浮动影响/right当前元素不受右浮动影响/both表示当前元素不受左右浮动的影响

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 20%;
            background-color: black;

        }
        .b{
            width: 60%;
            background-color: pink ;

        }
        .c{
            width: 20%;
            background-color: orangered;

        }
        .a,.b,.c{
            height: 200px;
            float: left;
        }
        .box{
            height: 360px;
            clear: left;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="box"></div>
</body>
</html>

3.浮动元素在排列时只参考前一个元素即可关于高度

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 20%;
            height: 50px;
            background-color: blue ;
        }
        .b{
            width: 80%;
            height: 100px;
            background-color: green;
        }
        .c{
            width: 40px;
            height: 400px;
            background-color: red;
        }
        .a,.b,.c{
            float: left;
        }
    </style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>

4.右浮动的顺序问题本来居左盒子序列数可以是1 2 3 居右以后就是3 2 1

5.浮动元素的重叠问题

1）浮动元素不会覆盖文字内容

2）浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以把图片看作是一个特殊的文字）

3）浮动元素不会覆盖表单元素（输入框单选按钮复选框按钮下拉选择框等）

白菜白菜白了个白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动问题

1.浮动的子元素没法把未设置高度的父元素撑开；要想把父元素撑开给父元素设置高度或者给父元素加样式overflow: auto 表示溢出对于超出边界的元素可以进行相应的调整;<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .a{ w
复制链接

扫一扫