面试常考css 两栏布局 清除浮动 水平垂直居中

1、float

.left{float:left;  height:100px;  width:100px;}

.right{height:100px;  margin-left:100px;}

2、position

.left{height:100px;  width:100px;  position:absolute;  top:0;  left:0}

.right{height:100px;  margin-left:100px;}

3、flex(父级设置display:flex)

.left{height:100px;  width:100px;}

.right{height:100px;  margin-left:100px;  flex-grow:1}

4、columns

二、三栏布局

.left{float:left;  height:100px;  width:100px;}

.middle{height:100px;  margin-left:100px;  margin-right:100px;}

.right{height:100px;  width:100px;  float:right;}

2、position

3、flex（父级设置display：flex）

.left, .right{height:100px;  width:100px;}

.middle{flex-grow:1;  height:100px;}

4、columns

三、水平垂直居中

{left:50%;  top:50%;  margin-left:元素的一半；margin-top:元素的一半}

{transform:translate(-50%,-50%)};

{position:absolute;  justify-content:center;  aligin-items:center;  display:flex;}

四、清除浮动

1、为什么要清除浮动

浮动元素不会脱离文字流，但是会脱离文档流，文字和带有inline属性的元素能看见，别的元素看不见，如果不清除浮动，border不能被撑开，背景不能显示，margin值不能正确设置

2、清除浮动的方法

底下添加新的元素，用clear:both

父级属性设置：overflow:hidden(触发bfc，可以自己计算高度)

添加伪元素：after{clear:both}（块级元素可以清除浮动）