CSS 之浮动（float）

最新推荐文章于 2024-10-03 23:01:58 发布

Blockchain Explorer

最新推荐文章于 2024-10-03 23:01:58 发布

阅读量225

点赞数

分类专栏： CSS/CSS3 文章标签：浮动（float） CSS 高度塌陷 clear

本文链接：https://blog.csdn.net/TDCQZD/article/details/82354532

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、基本介绍

float 属性最初只用于在成块的文本内浮动图像（文字环绕图片），但是现在它已成为在网页上创建多列布局的最常用工具之一。
取值：
left：表明元素必须浮动在其所在的块容器左侧的关键字。
right：表明元素必须浮动在其所在的块容器右侧的关键字。
none：表明元素不进行浮动的关键字。
语法：

    float: left;
        初始值 none
        是否是继承属性 否

代码示例：

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--
    float 属性最初只用于在成块的文本内浮动图像（文字环绕图片），但是现在它已成为在网页上创建多列布局的最常用工具之一。
取值：
    left：表明元素必须浮动在其所在的块容器左侧的关键字。
right：表明元素必须浮动在其所在的块容器右侧的关键字。
none：表明元素不进行浮动的关键字。

-->
        <!--浮动时，浮动标签覆盖的是容器样式,如果容器中有文本则会保留
    调试时设置opacity: 0
 -->
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #f {
                width: 300px;
                height: 500px;
                border: 1px solid;
            }

            img {
                float: right;
            }
        </style>
    </head>

    <body>
        <div id="f">
            <img src="../../../../img/avatar.jpg" />
            <p style="background: blue;">
                浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用 浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用浮动使用
            </p>
        </div>
    </body>

二、浮动的应用：垂直布局的元素变为水平

<head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            li{
                /*列表list的style属性,设置li的样式*/
                list-style: none;
                width: 30px;
                height: 20px;
                background: pink;
                float: left;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </body>

三、使用浮动会出现的问题是高度塌陷

浮动的子元素是无法撑开父元素的高度的。（导致父元素的兄弟元素位置产生偏移）

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--使用浮动会出现的问题是高度塌陷
                         原因是浮动的子元素是无法撑开父元素的高度的。（导致父元素的兄弟元素位置产生偏移）-->

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #wrap {
                /*height: 100px;*/
                background: blue;
                border: 2px solid;
            }

            #inner {
                width: 300px;
                height: 200px;
                background: pink;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <div id="inner">

            </div>
        </div>
    </body>

四、解决高度塌陷的方法：clear

clear CSS 属性指定一个元素是否可以在它之前的浮动元素旁边
取值：
none：不会清除浮动。
left：清除左浮动。
right：清除右浮动。
both：清除左右浮动
语法：

    float: left;
        初始值 none
        是否是继承属性 否

代码示例：

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--解决高度塌陷的方法：clear
         clear CSS 属性指定一个元素是否可以在它之前的浮动元素旁边
         取值：
         none：不会清除浮动。
         left：  清除左浮动。
         right：清除右浮动。
         both：清除左右浮动-->


    <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #wrap {
                background: blue;
                border: 2px solid;
            }

            #inner {
                width: 300px;
                height: 200px;
                background: pink;
                float: left;
            }
            /*wrap后面添加子元素*/
            #wrap:after{
                display: block;
                content: "";
                clear: both;
            }

            /*#span{
                clear: both;
            }*/
        </style>
    </head>

    <body>
        <div id="wrap">
            <!--<span id="span">111</span>-->
            <div id="inner">

            </div>
        </div>
    </body>