float

先来了解一下block元素和inline元素在文档流中的排列方式。

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。
浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

float属性值：

1、left：左浮动 左侧为起始，从左向右排列
2、right：右浮动  右侧为起始，从右向左排列
3、none ：不浮动，默认不浮动

浮动产生的影响

浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止

浮动的特性

什么是文档流

可见元素在文档中排列位置，元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

1.浮动会使元素脱离文档流
2.浮动会使元素提升层级
3.浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容
4.浮动可以使行内元素支持宽高

浮动产生的问题

父元素不设置高度，子元素设置浮动之后，不会撑开父元素的高度,那么此时父盒子没有高度了。如果在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。所以我们要解决浮动带来的页面布局错乱问题------清除浮动。

解决办法

 1.给父元素固定高度。不灵活
 2.在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both    结构冗余
 3.常用方法：.wrap:after{
            clear: both;
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
        }

4.给父盒子 添加overflow:hidden属性

原文地址：https://www.cnblogs.com/fmgao-technology/p/9246052.html