浮动布局

浮动布局：之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并排放置。由于div独占一行，并排是不可能实现的。所以我们需要采用浮动布局。

在浮动布局中，有向左浮动，即所有的浮动标签都向左靠拢对齐，当一行空间不够时，后面的标签被挤到下一行。所以建议，在开发中如果在一行使用了浮动布局那么可以用一个空的div来隔开，浮动标签和后面的标签，从而避免出现覆盖的问题，空div标签的css可以这样写 clear:both; 而不需要声明高宽等属性。

浮动布局的对立面是流动布局，流动布局跟左右相邻元素关系密切，而浮动布局能够让对象脱离左右相邻元素，在包含框内向左或向右浮动显示，但是浮动元素不能脱离文档流，依然受文档流的影响。默认情况下任何元素都不具有浮动性。

先用代码说明一下什么是浮动布局。

float3.png

当浮动布局和流动布局混在一起呢？下面代码中d3是普通的流动布局。

float4.png

显然d3被遮住了。以上现象原因解释：浮动使元素脱离了左右相邻元素，正常的文档流中丢失了它的位置。父元素在高度自适应的情况下，由于浮动丢失了子元素的高度，父元素就无法被撑开，所以导致父元素的背景、边框等属性无法生效，也会使后面的元素顶上来。

float5.png

以上是浮动布局最简单最直观的认识。
以下是浮动布局特征：
一、浮动布局以块状显示，可以定义width和height属性。

    


   行内元素流动显示
       
    
    行内元素浮动显示

floatSpan.png

第2个span元素被定义为浮动布局之后，该元素自动以块状显示，因此span元素定义的宽和高有效。而第一个span元素由于是行内元素且没有浮动显示，所以定义的宽和高无效，所看到的红色边框仅包裹在行内元素的外边。

二、浮动元素与流动元素可以混合使用，都遵循先上后下显示规则，都受到文档流的影响。但是浮动元素能够改变相邻元素的显示位置，可以向左或向右并列显示。

    


    

        行内元素流动显示
       
    
    行内元素浮动显示
    

屏幕快照 2018-01-13 下午5.14.37.png

三、浮动元素仅能改变水平显示方式，不能改变垂直显示方式，依然受文档流的影响。流动元素总会以流动的形式环绕浮动元素左右显示。

    

        

            
 图像标题
        
        CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局
    

pic.png

四、浮动元素可以并列显示，如果包含框宽度不够，则会错行显示。