float的用法

float的用法（脱离文档流）

  • left

  • 解决脱离文档流的办法有四种

1.float（会脱离页面流）
        -left
        -right
        -清除浮动元素1：
            在浮动元素下方写 <div style="clear:both"></div>
        -清除浮动元素2
            最优的方法，推荐
                CSS代码部分：
                .parent:after{
                    content:'';
                    display:'block';
                    clear:both;
                }
          -清除浮动元素3
            为父元素设置css规则：overflow:hidden ------------- 缺点：有时候不希望超出部分隐藏
                .parent{
                //...
                    overflow:hidden ; //某个固定值
                }
          -清除浮动元素4
            为父元素设置固定高度 -------------缺点：不知道具体高度没办法设置
                CSS代码部分：
                .parent{
                //...
                height:xxx; //某个固定值
                }
-->

float1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有父节点</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .son1{
            height: 80px;
            width: 80px;
            background-color: coral;
            float: left;
        }
        .parent:after{
           content: '';
           display: block;
           clear: both;
       }
    </style>
</head>
<body>
<div class="parent">
    <div class="son1">
        这是子元素1
    </div>
</div>
<p>这是一个浮动的元素，他现在不浮动了</p>
</body>
</html>

float2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>没有父节点</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .son1{
            height: 80px;
            width: 80px;
            background-color: coral;
            float: left;
        }
    </style>
</head>
<body>
    <div class="son1">
        这是子元素1
    </div>
    <div style="clear:both;"></div>
    <p>这是一个浮动的元素，他现在不浮动了</p>

</body>
</html>
posted @ 2021-01-29 15:36  dgxacc  阅读(425)  评论(0)    收藏  举报