布局

flex布局

css

float: none / left / right

非 none 的元素称为浮动元素，内联元素会变为块级元素。flex、grid布局元素设置float无效

浮动元素会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

只有浮动元素的父元素，高度为0。可以通过清除浮动自适应高度

css

clear: none / left / right / both

移动当前元素，使得一侧或两侧元素不能是浮动元素

块格式化上下文（Block Formatting Context，BFC）
浮动定位、清除浮动、外边距折叠只会应用于同一个BFC内的元素

创建方式：

<html>
float: left / right
position: absolute
display以下值：
- inline-block
- table、table-xxx
- flex、inline-flex
- grid、inline-grid
overflow不为visible
contain: layout / content / strict
多列容器
- column-count不为auto
- column-width不为auto
column-span: all

实现一个左25%，右75%的布局。HTML结构如下

html

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

flex布局

css

.container{ display: flex; }
.left{ flex: 0 0 25%; }
.right{ flex: 0 0 75%; }

grid布局

css

.container{ 
  display: grid;
  grid-template-columns: 25% 75%;
}

float布局

css

.container::after{ display: block; content:''; clear: both; }
.left{ float: left; width: 25%; }
.right{ float: left; width: 75%; }