练习理解浮动和清除浮动

练习理解浮动和清除★

.css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习理解浮动和清除浮动</title>

    <style>
        /*1.清除浮动左*/
        #div1{
            background:red;
            width:200px;
            height:30px;
            float:left;
        }
        #div2{
            background:green;
            width:200px;
            height:50px;
            float:left;
            clear:left;
        }
        #div3{
            background:blue;
            width:220px;
            height:100px;
        }


        /*2.清除浮动右*/
        #div4{
            background:red;
            width:200px;
            height:30px;
            float:right;
        }
        #div4+div{
            background:green;
            width:200px;
            height:50px;
            float:right;
            clear:right;
        }
        #div6{
            background:blue;
            width:220px;
            height:100px;
            margin-left:auto;
        }


    </style>

</head>
<body>

<p style="font-weight:bold;font-family:楷体">1.清除div2浮动左：左侧不能有浮动,div3用来证明div1和div2确实是浮动的</p>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<p style="font-weight:bold;color:red">如上图，div3高度为100px，因为div1和div2都是浮动的，所以div3向上顶替了div1的位置</p>
<p style="font-weight:bold;color:red">div3在高度上漏出了100-30-50=20px，宽度上漏出了220-200=20px</p>

<p style="font-weight:bold;font-family:楷体">2.清除div5浮动右：右侧不能有浮动,div6用来证明div4和div5确实是浮动的</p>
<div id="div4">div4</div>
<div>div5</div>
<div id="div6">div6</div>
<p style="font-weight:bold;color:red;">如右上图，div6高度为100px，因为div4和div5都是浮动的，所以div6向上顶替了div4的位置</p>
<p style="font-weight:bold;color:red">div6在高度上漏出了100-30-50=20px，宽度上漏出了220-200=20px</p>

</body>
</html>

生成页面效果

知识点总结

在这个练习中，顺便回顾了层次选择器的知识

#div4+div{
            background:green;
            width:200px;
            height:50px;
            float:right;
            clear:right;
        }

意为选择id为div4的向下同代元素

学习了一个新的知识：如何让块级元素靠右（存疑）

html代码如下

<div class="parent">
  <div class="block"></div>
</div>

css代码如下

/*方法一 : 将 margin-left 设为 auto 后, 元素左边的 margin 会被尽可能的撑大, 所以自然就把元素挤到右边去了*/
.block{
    margin-left: auto;
}

/*方法二 : 使用 position 定位, 绝对能把元素放到右边去.*/
.parent{
  position: relative;
}
.block{
  position: absolute;
  right: 0;
}

/*方法三 :  使用浮动float*/
.block{
  float: right;
}

/*方法四 : 使用text-align，将块设为行内元素,然后父元素使用 text-align: right; 使块到右边*/
.parent{
  text-align: right;
}
.block{
  display: inline-block;
}

/*方法五 : 使用flex属性，将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.*/
.parent{
  display: flex;
  justify-content: flex-end;
}