float浮动属性详解，DIV横向排列布局核心方法
一、浮动的核心作用与布局
默认状态下，DIV是块级元素，独占一行，多个DIV会从上到下垂直排列，无法实现多个DIV横向并排显示，而网页布局中，导航栏、产品列表、两列布局、三列布局，都需要多个模块横向排列，float浮动属性，就是实现DIV横向并排布局的核心方法，也是传统DIV+CSS布局最基础、最常用的排版方式。
浮动的核心原理，是让设置了float属性的DIV盒子，脱离标准文档流，不再占据页面空间，向左或者向右紧贴停靠，直到碰到父级容器边框或者其他浮动的DIV盒子。标准文档流就是页面默认的排版规则，块级元素从上到下排列，行内元素从左到右排列，没有设置任何定位、浮动的元素，都处于标准文档流中。
浮动的DIV一旦脱离标准文档流，父级DIV就无法感知到子级浮动DIV的存在，父级DIV的高度不会被浮动的子级撑开，会出现高度塌陷问题，这是浮动布局最核心的问题，也是新手必须掌握的清除浮动知识点。同时浮动的元素会变成行内块特性，多个同向浮动的DIV会横向并排显示，不会自动换行，只有总宽度超出父级容器宽度时，才会自动换行。
二、float浮动的三个属性值与用法
float浮动属性有三个常用属性值，分别是left左浮动、right右浮动、none取消浮动，其中left和right是布局核心用法，none是默认值，没有浮动效果
第一个属性值float:left; 左浮动，设置该样式的DIV盒子，会脱离标准文档流，向左停靠，多个同时设置左浮动的DIV，会从左到右依次横向并排排列，这是网页布局中最常用的浮动方式，导航栏菜单、产品列表、新闻列表、左列布局，全部使用左浮动实现。
第二个属性值float:right; 右浮动，设置该样式的DIV盒子，会脱离标准文档流，向右停靠，多个同时设置右浮动的DIV，会从右到左依次横向并排排列，适合网页右侧的登录按钮、搜索框、返回顶部、右列侧边栏等模块，使用频率低于左浮动。
第三个属性值float:none; 取消浮动，是元素的默认状态，元素处于标准文档流中，独占一行，垂直排列，没有浮动效果，当需要取消之前设置的浮动样式时，就可以设置float:none;。
新手使用浮动时，必须记住一个核心规则：一个容器内的浮动子元素，浮动方向要统一，要么全部左浮动，要么全部右浮动，不要混用左右浮动，避免出现排列混乱、位置错位问题。同时需要横向并排的所有DIV，都必须设置浮动，只给部分元素设置浮动，会出现排版错乱
三、浮动布局的高度塌陷
浮动布局最核心、最常见的问题，就是父级容器高度塌陷，这是所有新手学习浮动必须解决的问题，也是网页布局中高频出现的问题。高度塌陷的产生原因非常明确：当父级DIV没有设置固定高度，内部子级DIV全部设置浮动时，浮动的子级DIV脱离标准文档流，父级DIV无法感知到子级的存在，没有内容可以撑开高度，父级DIV的高度就会自动变成0，也就是
高度塌陷会引发一系列布局问题，最直接的就是父级DIV的背景色、背景图片无法显示，边框样式无法正常展示，父级下方的模块会自动上移，和浮动模块重叠，导致整个页面排版完全错乱，布局失效。只要使用浮动布局，就必须处理高度塌陷问题，也就是清除浮动，这是浮动布局的必备步骤，绝对不能省略。
很多新手会遇到，给父级DIV设置了背景色，但是页面中完全不显示，子级DIV排列正常，就是找不到问题原因，99%的情况都是高度塌陷导致的，父级高度为0，背景色自然无法显示。只要学会清除浮动，这个问题就可以一次性彻底
四、清除浮动的四种常用方法，推荐最优方案
清除浮动的核心目的，是让父级DIV能够感知到浮动子级的高度，自动撑开高度，解决塌陷问题，同时不影响页面布局结构。目前有四种常用的清除浮动方法，各有优缺点，其中两种是主流推荐方案，适合新手使用
第一种方法：给父级DIV设置固定高度。优点是写法简单，直接生效，缺点是灵活性极差，只能用于子级内容高度固定的场景，如果子级内容高度变化，父级高度无法自适应，会出现内容溢出问题，正式网站布局绝对不推荐使用，只适合临时固定高度的模块。
第二种方法：在父级DIV内部最后，添加一个空的块级DIV，设置样式clear:both;。clear:both; 是清除左右两侧浮动的样式，空DIV会撑开父级高度，优点是兼容性极强，支持所有浏览器，缺点是需要在页面中添加无意义的空DIV标签，破坏结构语义化，增加冗余代码，属于早期传统写法，目前不推荐使用。
第三种方法：给父级DIV设置overflow:hidden; 溢出隐藏属性。原理是触发BFC块级格式化上下文，让父级可以包裹浮动元素，自动撑开高度。优点是写法极简，只需要一行代码，不增加冗余标签，兼容性良好，适合大部分简单布局场景，缺点是如果父级内部有需要超出显示的定位元素、下拉菜单，会被直接隐藏，无法使用，有一定
第四种方法：通用清除浮动伪类法，也是目前行业标准、最优推荐方案。给需要清除浮动的父级DIV，添加一个统一的类名，通过CSS伪类after清除浮动，优点是不增加冗余HTML标签、不破坏结构语义化、兼容性完美、无任何副作用、适合所有布局场景，正式网站开发全部使用这种方法，新手必须牢记这个通用代码，所有浮动布局直接复用即可。
