浮动详细内幕特性

网页布局的核心，就是用CSS来摆放盒子的位置。CSS的定位机制有3种：普通流、浮动、定位

        普通流实际上就是一个网页标签元素正常从上带下，从左到右排列的意思，比如块级元素会独占一行；行内元素会按顺序依次前后排列。按照这种大前提的布局排列之下，绝对不会出现例外的情况叫做普通流布局

        浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定的位置的过程

p{
    float:(left向左浮动；right向右浮动；none默认值，不浮动)
}

浮动的特性

        1、浮动脱离标准流，不占位置，会影响标准流；浮动只有左右浮动

        2、浮动首先创建包含块的概念，就是说浮动的元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围

        3、浮动的元素排列位置跟上一个元素(块级)有关系。如果上一个元素有浮动，则本元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则本元素的顶部会和上一个元素的底部对齐

        4、一个父盒子里面的子盒子中，如果其中一个子级有浮动的话，则其他子级都需要浮动，这样才能一行对齐显示

        5、元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或默认的内容多少，浮动根据元素书写的位置来显示相应的浮动

        6、浮动的目的就是为了让多个块级元素在同一行显示

        7、加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子的上面

        8、浮动的盒子不占位置，它原来的位置给了标准流的盒子

        9、特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次浮动可以使元素显示模式体现为行内块的特性

清除浮动

        1、浮动的本质是用来做一些文字混排效果的，但是被我们拿来做布局用，会有很多问题

        2、由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动

        3、准确来说，并不说清除浮动，而是清除浮动后造成的影响

清除浮动的方法

        1、其本质叫做闭合浮动更好一些，清除浮动就是把浮动的盒子圈在里面，让父盒子闭合出口和入口，不让它们出来影响其他元素

p{
    clear:left
}

left  不允许左侧有浮动元素，清除左侧浮动影响

right  不允许右侧有浮动元素，清除右侧浮动影响

both  同时清除左右两侧浮动的影响

        2、额外标签法

        是W3C推荐的做法，是通过在浮动的元素末尾添加一个空的标签，例如

<div style="clear:both"></div>

        3、父级添加overflow属性方法

        4、使用after伪元素清除浮动

 

.clearBox:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearBox{
    zoom:1;
}