练习理解浮动和清除★

.css代码

    
    

    




1.清除div2浮动左：左侧不能有浮动,div3用来证明div1和div2确实是浮动的
div1
div2
div3
如上图，div3高度为100px，因为div1和div2都是浮动的，所以div3向上顶替了div1的位置
div3在高度上漏出了100-30-50=20px，宽度上漏出了220-200=20px

2.清除div5浮动右：右侧不能有浮动,div6用来证明div4和div5确实是浮动的
div4
div5
div6
如右上图，div6高度为100px，因为div4和div5都是浮动的，所以div6向上顶替了div4的位置
div6在高度上漏出了100-30-50=20px，宽度上漏出了220-200=20px

生成页面效果

知识点总结

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

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

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

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

html代码如下

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;
}