【css_4】浮动

1、css布局三种机制

① 普通流：块级、行内

行内块中间有空隙，很难去掉；当要求是两个块，一个左对齐一个右对齐时行内块更是难实现

普通流很难解决以上两种问题，此时可以用浮动解决

② 浮动

脱离普通流的控制，移动端到指定位置

特性：（1）会浮起来，原来占得位置被释放（2）如果有普通流会被普通流占据；（3）不管之前是什么类型元素，加了float后，会自动被赋予行内块元素的属性

多个浮动元素时，如果父级元素装不开时，浮动元素会自动折行显示

若不想浮动后遮挡住其他普通流元素，可以给浮动元素添加普通流的父级元素，要浮动和普通标准流配合使用

子元素不会压住父元素的内边距和边框

浮动会影响后面普通流元素的显示，不会影响前面普通流元素的显示

2、清除浮动

应用场景：父级元素不方便给高度（高度不确定），多个子元素设置浮动后，引起内部高度为0，下面的普通流元素会上移到多个子元素后面

给父元素清除浮动后，父元素的高度会自动识别为子元素的高度，以最高的子元素为准

清除浮动的方法：

clear:left/right/both，几乎都用both

①：额外标签法（隔墙法），在最后一个浮动