前端浮动的相关学习

绵羊

已于 2024-08-09 16:59:46 修改

阅读量259

点赞数 8

文章标签： html css

于 2024-08-06 13:00:44 首次发布

本文链接：https://blog.csdn.net/2303_77005062/article/details/140943845

版权

什么是浮动

浮动是页面布局的一种方式，标准流控制的是上下布局，而浮动控制的是左右布局

浮动的特性

第一个：脱标，元素浮动后脱离原来的位置，下面的标准流抢占原来的位置

第二个：浮动的元素具有行内块特性，在一行显示，可以设置宽高。设置浮动后不需要再进行行内和块级的转化

第三个：浮动布局，最好是结合标准流作父级布局

浮动的练习

第一个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局练习1</title>
    <style>
        .box {
            width : 1200px;
            height : 460px;
            background : pink;
            margin : 0 auto;
        }

        .left {
            float : left;
            width : 230px;
            height : 460px;
            background : purple;
        }

        .right {
            float : left;
            width : 970px;
            height : 460px;
            background : skyblue;
        }
    </style>
</head>
<body>
    <!-- 先创建一个父盒子，在父盒子里添加两个浮动的盒子 -->
     <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
     </div>
</body>
</html>

第二个：以无序列表做底层，来实现float布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局练习2</title>
    <style>
        * {
            margin : 0;
            padding : 0;
        }

        li {
            list-style : none;
        }

        .box {
            width : 1226px;
            height : 285px;
            background : pink;
            margin : 0 auto;

        }

        .box li {
            width : 296px;
            height : 285px;
            background : purple;
            float : left;
            margin-right : 14px;
        }

        .box .last {
            margin-right : 0;
        }
    </style>
</head>
<body>
    <ul class = "box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class = "last">4</li>
    </ul>
</body>
</html>