CSS浮动

最新推荐文章于 2024-01-29 09:41:15 发布

zl吉姆餐厅

最新推荐文章于 2024-01-29 09:41:15 发布

阅读量89

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_32631105/article/details/107131202

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浮动

float

属性	样式
none	不浮动
left	向左浮动
right	向右浮动

清除浮动

clear

元素浮动引起父元素塌陷，影响布局效果。

clear属性

属性	样式
none	无控制
left	左侧不允许浮动
right	右侧不允许浮动
both	两侧都不允许浮动

overflow属性
设置元素不够容纳内容时的显示方式。

属性	样式
auto	自动添加滚动条
hidden	隐藏超出的内容
scroll	一直显示滚动条

常用技巧

<!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>Document</title>
    <style>
        .box {
            border: 1px solid red;
        }

        .left {
            width: 200px;
            height: 200px;
            background: yellow;
            float: left
        }

        .right {
            width: 200px;
            height: 200px;
            background: green;
            float: right;
        }
        .clearfix:after {
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>

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

</html>

双飞翼布局

<!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>Document</title>
</head>
<style>
    .container {
        border: 1px solid red;
        width: 800px;
        margin: 0px auto;
        overflow: hidden; 
    }

    .center {
        float: left;
        background-color: yellow;
        width: 100%;
    }

    .left {
        float: left;
        background-color: green;
        width: 200px;
        margin-left: -100%;
    }

    .right {
        float: left;
        background-color: pink;
        width: 200px;
        margin-left: -200px;
    }
    .content {
        margin: 0px 200px;
    }
</style>

<body>
    <div class="container">
        <div class="center">
            <div class="content">edge</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>