CSS基础（五）浮动布局

最新推荐文章于 2024-07-18 22:26:13 发布

今天自洽了吗

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量125

点赞数

分类专栏： CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/hold_on_qlc/article/details/128414888

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

块元素

可以设置高度和宽度并且独立成行的元素。

如：h1->h6,p,div,ul,li等。

行内元素

又称内联元素、行级元素，不可以给元素本身设置宽度和高度。

如：a,span等。

行内块元素

可以设置宽度和高度，不独立成行。

如：img,input,button等。

display属性

可赋的值有：

block：转换为块元素。

inline：转换为行内元素。

inline-block：转换为行内块元素。

none：隐藏元素。

浮动

据观察，div在网页中是逐行显示的块元素，那么，如何将两个div设置在同一行显示呢？

需要将两个div都设置为浮动元素。

属性为：float

float属性有三个取值：

none 表示无浮动效果（默认）
right 表示元素浮动到右边
left 表示元素浮动到右边

浮动元素的特性是脱离文档流（漂到上一层了，会将原本的位置释放），设置元素浮动是为了设置文字环绕图片效果，使得页面布局美观，但是释放位置后，其他元素会占掉释放的位置，多个元素挤在一起不好看，如何解决这个问题呢？

可以利用伪元素选择器在浮动元素前后个增加一个空div，再用clear：both属性来清除浮动。

如：

      .选择器名字::before,.选择器名字::after{
            /* 表示在元素前/后增加的元素为空 */
            content:"";
            /* 将空元素转换为块元素 */
            display: block;
            /*清除浮动造成的影响*/
            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>
        .clear::before,.clear::after{
            /* 使用伪元素选择器，在div前后添加两个空元素 */
            content:"";
            /* 将空元素转换为块元素 */
            display: block;
            clear:both;
        }
        .content{
            width: 300px;
            height: 200px;
            border: 1px solid red;
            /* 设置元素浮动 */
            float: left;
        }
        .aside{
            width:100px;
            height: 200px;
            border:1px solid blue;
            /* 两个元素都设置浮动了，才能在同一行显示 */
            float: left;
            /* 浮动元素特性：
            脱离文档流 (漂到上一层了)
            如何解决？——利用空div清楚浮动*/
        }
        .box{
            width: 400px;
            height:400px;
            background-color:yellow;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="container clear">
        <div class="content">内容</div>
        <div class="aside">边栏</div>
    </div>
    <!-- 空div ——》 清楚上面浮动效果造成的不良影响 -->
    <!-- <div class="clear"></div> -->
    <div class="box"></div>
</body>
</html>