H5浮动

float（浮动）：

浮动包括left和right（左、右浮动）

设置浮动是为了让块属性元素可以排成一排

1.浮动可以使用行属性元素支持宽高

2.浮动具有流式布局效果和文字环绕效果

3.浮动会有脱离文档流效果

浮动的影响:如果父元素没有高度，靠子元素撑开。当子元素浮动，脱离文档流，父元素则不会被撑开进而失去高度，这样会影响布局

解决方案：给父元素设置overflow:hidden;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #father{
            width: 700px;
            height: 30px;
            background: lightblue;
            margin: 100px;
            auto 0;
        }
        #son1{
            width: 500px;
            height: 100%;
            background: lightblue;
            display: inline-block;
            float: right;

        }
        #son2{
            width: 100px;
            height: 100%;
            background: lightgreen;
            /*display: inline-block;*/
            /*float: left;*/

        }
    </style>
<!-- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 -->
</head>
<body>
<div id="father">
    <div id="son1"></div>
    <div id="son2"></div>
</div>
</body>
</html>

 

posted on 2021-11-07 15:04  无心情泡面  阅读(380)  评论(0)    收藏  举报