CSS学习笔记之浮动 2.25

Terry-98

已于 2022-02-25 17:53:48 修改

阅读量189

点赞数 2

文章标签：前端学习 css3

于 2022-02-25 15:18:08 首次发布

本文链接：https://blog.csdn.net/qq_36450483/article/details/123133292

版权

一、浮动（float）

1.1 浮动的特性：

1、脱离标准普通流的控制移动到指定位置，（朝你靠近，俗称脱标）

2、浮动的盒子不再保留原先的位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
       
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

</html>

3、如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列（浮动的元素是相互贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            background-color: purple;
            height: 300px;
        }

        .four {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

</html>

4、浮动元素具有行内块元素特性

1）添加浮动后块级盒子大小根据内容来决定

2）浮动盒子紧挨

3）行内元素同理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        /* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */
        span{
            width: 100px;
            height: 100px;
            float: left;
            background-color: red;
        }
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        /* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 */
        p {
            float: right;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>

    <div>div</div>
    <p>psdawfafdasda</p>
</body>

</html>

1.2 浮动元素和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box {
            width: 1200px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 250px;
            height: 460px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 950px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

</html>

1.3 浮动练习

1、浮动盒子放在大盒子里

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1350px;
            height: 400px;
            background-color: yellow;
            margin:0 auto;
        }
        .box li{
            list-style: none;
            float: left;
            width: 300px;
            height: 400px;
            background-color: purple;
            margin-right: 50px;
        }
        .box .last{
            margin-right: 0;
        }

    </style>
</head>

<body>
   <ul class="box">
       <li>1</li>
       <li>1</li>
       <li>1</li>
       <li class="last">1</li>
   </ul>
</body>

</html>

2、进一步练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box {
            width: 1200px;
            height: 600px;
            background-color: skyblue;
            margin: 0 auto;
        }

        .left {
            width: 300px;
            height: 600px;
            background-color: yellowgreen;
            float: left;
          
        }

        .right  {
            width: 900px;
            height: 600px;
            background-color: yellow;
            float: left;

        }
        .right>div{
            width: 200px;
            height: 260px;
            background-color: #ccc;
            float: left;
            margin-left: 20px;
            margin-bottom: 80px;
        }

       
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html>