css浮动属性float布局详解代码：清除浮动与左右浮动

发布日期：2023-11-02 来源：小码王编程查看人数： 6

导读：css float浮动布局是目前主流布局方式，float有4种方式，常用的有两种left、right；浮动样式代码怎么写，在使用浮动后如何清除浮动目录1css浮...

css float浮动布局是目前主流布局方式，float有4种方式，常用的有两种left、right；浮动样式代码怎么写，在使用浮动后如何清除浮动

css浮动右浮动float: right

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <title>通高科技</title>
        <style>
            .div {
              background-color: yellowgreen;
              width: 100px;
              height: 100px;
              border: 1px dotted black;
              margin-left: 40px;
              float: left;
              margin-top: 10px;

            }
            .div2{
                float: right;
            }
        </style>
    </head>
    <body>
        <div >
            <div class="div">左浮动1</div>
            <div class="div div2">右浮动2</div>
            <div class="div div2">右浮动3</div>

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

运行结果：

css浮动左浮动float: left

向左浮动代码表示：float: left;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <title>通高科技</title>
        <style>
            .div {
              background-color: yellowgreen;
              width: 100px;
              height: 100px;
              border: 1px dotted black;
              margin-left: 40px;
              float: left;
              margin-top: 10px;

            }


        </style>
    </head>
    <body>
        <div >
            <div class="div">左浮动1</div>
            <div class="div">左浮动2</div>
            <div class="div">左浮动3</div>

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

运行结果：

css浮动清除属性clear

clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。（left、right、both、none、inherit）
实例：5个左浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <title>通高科技</title>
        <style>
            .div {
              background-color: yellowgreen;
              width: 100px;
              height: 100px;
              border: 1px dotted black;
              margin-left: 40px;
              float: left;

            }
            .div1{
                float: left;
                background-color: yellowgreen;
                width: 100px;
                height: 100px;
                border: 1px dotted black;
                margin-left: 40px;
                margin-top: 10px;
                clear: left;
            }


        </style>
    </head>
    <body>
        <div >
            <div class="div">左浮动1</div>
            <div class="div">左浮动2</div>
            <div class="div ">左浮动3</div>
            <div class="div">左浮动4</div>
            <div class="div">左浮动5</div>
        </div>
    </body>
</html>

运行效果：

需求:对3号块取消左浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <title>通高科技</title>
        <style>
            .div {
              background-color: yellowgreen;
              width: 100px;
              height: 100px;
              border: 1px dotted black;
              margin-left: 40px;
              float: left;
              margin-top: 10px;

            }
            .div1{
                float: left;
                background-color: yellowgreen;
                width: 100px;
                height: 100px;
                border: 1px dotted black;
                margin-left: 40px;
                margin-top: 10px;
                clear: left;
            }


        </style>
    </head>
    <body>
        <div >
            <div class="div">左浮动1</div>
            <div class="div">左浮动2</div>
            <div class="div div1">左浮动3</div>
            <div class="div">左浮动4</div>
            <div class="div">左浮动5</div>
        </div>
    </body>
</html>

运行结果：

对3号块取消浮动后。3号块没有浮动，4号.5号块继续左浮动。

你也想0元试听小码王少儿编程课程吗？
填写信息免费预约

免责说明：以上展示内容源于网络、合作媒体和网友提供，转载请说明出处。我们对站内所有内容、观点保持中立，如您发现该内容有任何违法/侵权信息，请及时联系我们处理！
本文标题：css浮动属性float布局详解代码：清除浮动与左右浮动，本文链接： http://www.xiaomawang.vip/help/20935.html

上一篇：css常用的文本属性标签

下一篇：Python是编译型语言还是解释型语言，两者有什么不同之处