前端-CSS3学习笔记十一

日期：2022/1/24

P66_clear

1.clear,作用：清除浮动元素对当前元素所产生的影响
                        高度塌陷问题
        可选值：
                left，清除左侧浮动元素对当前元素的影响
                right，清除右侧浮动元素对当前元素的影响
                both，清除两侧中最大影响的那侧

        原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距
                        以使其位置不受其他元素的影响

P67_使用after伪类解决高度塌陷

：：after是行内元素
例子：
        .box1{
                border: 10px solid red;
        }
        .box2{
                width: 100px;
                height: 100px;
                background-color: #bfa;
                float: left;
        }
        .box1::after{
                content: '';
                display: block;
                clear: both;
        }

	<div class="box1">
		<div class="box2"></div>        
	</div>

P68_clearfix

1.clearfix,可以同时解决高度塌陷和外边距重叠的问题
        before,解决外边距问题
        after，解决高度塌陷问题
        例子：
                .box1 {
                        border: 10px solid red;
                }
                .box2 {
                        width: 100px;