CSS基础0604

清除浮动

什么时候需要清楚浮动

如果一个块级元素没有设置height，其高度就由子元素撑开，如果子元素使用了浮动，脱离了标准的文档流，那么父元素的高度将不能被其撑开。表现出高度塌陷的现象。

清除浮动的方式

• 父级元素定义height

• 父级结尾处添加一个空div，设置css样式clear: both

  原理：添加一个空div，利用css提高的clear: both清除浮动，让父级 div 能自动获取到高度

• 父级定义伪元素:after。原理：元素生成伪元素的作用和效果相当于方法2中的原理，使用伪元素生成一个看不见的块级元素，并且设置clear:both

• 父级div添加css属性：overflow:hidden

居中布局

水平居中

• 行内元素：text-align: center
• 块级元素：margin: 0 auto
• 绝对定位和移动：absolute + transform

.son {
    /*
    当把当前元素设置为绝对定位后，
    如果父级元素没有开启定位的话，当前元素是相对于页面定位的
    如果父级元素开启了，则是相对于父级元素定位
    */
    position: absolute;
    /*
    设置离左边距的距离为50%(结果就是child的左边距居中了)
    */
    left: 50%;
    /*
    因为我们需要子元素整体居中，所以我们对子元素进行平移
    */
    transform: translateX(-50%);
}

• 绝对定位和负边距：absolute + margin

.son {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;
}

**说明：**宽度固定相比于使用transform ，有兼容性更好

• flex布局：flex + justify-content: center

垂直居中

• 子元素为单行文本：line-height: height的值
• 绝对定位和移动：absolute + transform

.son {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

• 绝对定位和负边距：absolute + margin

.son {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

• flex布局：flex + align-items: center
• display:table-cell; 和vertical-align:middle;

.parent {
    display: table;
    width: 50px;
    height: 500px;
}
.son {
    display: table-cell;
    vertical-align: middle;
    background-color: aqua;
}

水平垂直居中

• 已知元素宽高：absolute + margin:auto

.son {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

• 已知元素宽高：absolute + 负margin

.son {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -400px;
}

• 绝对定位和移动：absolute + transform

.son {
    position:absolute;
    left:50%;    /* 定位父级的50% */
    top:50%;
    transform: translate(-50%,-50%); /*自己的50% */
}

• flex布局：flex + justify-content + align-items

.box {
    display:flex;
    justify-content:center;  /*子元素水平居中*/
    align-items:center;      /*子元素垂直居中*/
    height: 400px;
}
.son {
    background: green;
    width: 200px;
    height: 200px;
}