CSS-float

最新推荐文章于 2024-10-08 17:57:19 发布

MSL7141

最新推荐文章于 2024-10-08 17:57:19 发布

阅读量126

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/MSL7141/article/details/120447565

版权

标准流（普通流/文件流）

标准流：标签按照默认的方式进行排列,最基本的页面布局

1.块级元素独占一行，从上至下

常见的有：div,hr,p,h1~h6,ul,ol,dl,form,table

2.行内元素按照顺序从左至右排序，到父级元素边缘自动换行

常见的有：span,a,i,em

网页布局三种方式：标准流，浮动，定位

浮动

浮动可以改变标签默认的排列方式

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

浮动：float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘及包含块或者另外一个浮动框的边缘。

基本语法

选择器{ float：属性值；}

<!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>浮动</title>
    <style>
         .left,
         .right1 {
             float:left;
             width: 200px;
             height: 300px;
             background-color:rgba(235, 128, 22, 0.884);
         }
         .right2 {
             float:right;
             width: 200px;
             height: 300px;
             background-color:rgba(235, 22, 51, 0.884);
         }
    </style>
</head>
<body>
     <div class=left>左青龙</div>
     <div class=right1>右白虎</div>
     <div class=right2>右白虎</div>
</body>
</html>

运行结果

浮动特性

1.浮动元素脱离标准流

2.浮动的元素会一行内显示且元素顶部对齐

3.浮动元素具有行内块元素的特性

（1）脱标元素脱离标准流的控制，移动到指定位置

（2）浮动的盒子不在保留原来的位置

（3）默认宽度与父级一致，添加浮动后大小由内容决定

（4）浮动盒子之间无缝隙

 <style>
        span,
         div{
             float:left;
             width: 200px;
             height: 300px;
            
         }
         .one {
            background-color:rgba(235, 128, 22, 0.884);

         }
        
         span {
            background-color:rgba(3, 3, 5, 0.884);
         }
        
          p {
             float:right;
             height: 200px;
             background-color: rgb(19, 146, 219); 
          }   

         
    </style>
<!-- 如果行内元素有了浮动则不需要转换为行内块、块级元素即可赋予高度和宽度 -->
     <span></span>
     <p>pppp</p>

小米官网布局示例1

<!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>小米布局案例</title>
    <style>
        .box {
            width: 1200px;
            height: 520px;
            background-color: darkgrey;
            margin: 0 auto;

        }
        .head1 {
            width: 1200px;
            height: 40px;
            margin-bottom: 5px;
            background-color:  rgb(219, 52, 155);


        }

        .left {
            float: left;
            width: 230px;
            height: 480px;
            background-color: rgb(98, 187, 25);

        }

        .right {
            float: right;
            width: 970px;
            height: 480px;
            background-color: rgb(247, 138, 14);


        }
    </style>
</head>

<body>
    <div class="box">
        <div class="head1"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>

</html>

运行结果

小米布局案例2

<!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>小米布局2</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .box {
            width: 1226px;
            height: 280px;
            background-color: rgb(116, 161, 230);
            margin:0 auto;
        }
        li {
            list-style: none;
        }
        .box li {
            width: 296px;
            height: 280px;
            background-color: darksalmon;
            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>

小米示例3

<!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>小米布局3</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin:0 auto;

        }
        .box .left {
            float:left;
            width: 234px;
            height: 615px;
            background-color: skyblue;

        }
        .box .right{
            float:left;
            width: 992px;
            height: 615px;
            background-color: rgb(176, 240, 104);
        }
        .right>div {
            width: 234px;
            height: 300px;
            background-color:grey;
            float:left;
            margin-left:14px;
            margin-bottom: 14px;

        }
    </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>

常见页面布局：

<!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>常见的网页布局</title>
    <style>
 * {
        margin:0;
        padding:0;

    }
    li {
        list-style: none;
    }
    .top {
        height: 50px;
        background-color: gray;
    }
    .banner {
        width: 980px;
        height: 150px;
        background-color: grey;
        margin:10px auto;
    }
    .box {
        width: 980px;
        margin:0 auto;
        height: 300px;
        background-color: rgb(97, 8, 8);

    }
    .box li {
        float:right;
        width: 237px;
        height: 300px;
        background-color: ivory;
        margin-right: 8px;
    }
    .box .last {
        margin-right: 0；
    }
    .footer {
        height: 200px;
        background-color: lightblue;
        margin-top: 10px;

    }
    </style>
   
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>
</html>