【前端学习笔记】浮动属性

最新推荐文章于 2022-10-24 21:47:29 发布

爷傲奈我何_m

最新推荐文章于 2022-10-24 21:47:29 发布

阅读量262

点赞数

分类专栏：我的前端之路文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_43841844/article/details/122284581

版权

我的前端之路专栏收录该内容

9 篇文章 0 订阅

订阅专栏

浮动属性

文章目录

浮动属性
浮动案例

浮动的作用

浮动的作用1：定义网页中其他文本如何环绕该元素显示
浮动的作用2：就是让竖着的东西横起来

个数	属性	描述	说明
1	float	float : left	元素靠左边浮动
2	float	float : right	元素靠右边浮动
3	float	float : none	元素不浮动
4	clear	clear: none	允许有浮动对象
5	clear	clear: right	不允许右边有浮动对象
6	clear	clear: left	不允许左边有浮动对象
7	clear	clear: both	不允许有浮动对象

浮动的副作用（清除浮动）

清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档的位置。
浮动会引起高度塌陷

解决方法一：写固定高度

代码示例：

<!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>Document</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        } 
        .container{
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

解决方案二：清除浮动

这个属性要加给后边的兄弟

<!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>Document</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            clear: left;
        } 
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

解决方案三：当前浮动元素后面补一个盒子，不设置宽高，clear：both

<!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>Document</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        } 
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div style="clear: left;"></div>
    </div>
    <div class="box"></div>
</body>
</html>

解决方案四：overflow：hidden

bfc 让浮动元素计算高度

<!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>Document</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        } 
        .container{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

浮动案例

<!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>Document</title>
    <style>
        div img{
            width: 187px;
            height: 125px;

        }
        div p{
            width: 187px;
            font-size: 12px;
            text-align: center;
            background-color: #f6f7f8;

        }
        div{
            float: left;
        }
        
    </style>
</head>
<body>
    <div>
        <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/34ab42d1d15c245696b013a5360b22bd.jpeg?x-bce-process=image/crop,x_0,y_62,w_950,h_638"/>
        <p>迪丽热巴蓝色挑染发丝 如梦似幻</p>
    </div>
    <div>
        <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/530fda82dc2b62b22a9a895959432371.jpeg?x-bce-process=image/crop,x_0,y_108,w_640,h_430"/>
        <p>唐嫣穿粉色西装气场全开</p>
    </div>
    <div>
        <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/51a4337e1ac7e5ea6d848b8cfac6f53c.jpeg?x-bce-process=image/crop,x_30,y_0,w_693,h_465"/>
        <p>井柏然身着印花毛衣温柔软糯</p>
    </div>
    <div>
        <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/ab163e5d25f3d4cc081670ec4559e56e.jpeg?x-bce-process=image/crop,x_0,y_87,w_640,h_430"/>
        <p>陈都灵大波浪卷发气质温柔</p>
    </div>
    <div>
        <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/7787662453a01320ca80453f0d882457.jpeg?x-bce-process=image/crop,x_0,y_42,w_640,h_430"/>
        <p>baby穿纯白露背长裙高贵典雅</p>
    </div>
</body>
</html>

爷傲奈我何_m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】浮动属性

浮动属性文章目录浮动属性浮动的作用浮动的副作用（清除浮动）解决方法一：写固定高度解决方案二：清除浮动解决方案三：当前浮动元素后面补一个盒子，不设置宽高，clear：both解决方案四：overflow：hidden浮动案例浮动的作用浮动的作用1：定义网页中其他文本如何环绕该元素显示浮动的作用2：就是让竖着的东西横起来个数属性描述说明1floatfloat : left元素靠左边浮动2floatfloat : right元素靠右边浮动3floatf
复制链接

扫一扫

专栏目录