CSS基础——浮动

一、浮动定位的定义
浮动打破了块级元素独占一行的惯例，使多个块级元素可以在一行显示。
二、浮动定位的特点
1、浮动元素脱离了普通的文档流，在不在占据页面空间时，其他没有浮动的元素会自动上前占据浮动元素原来的页面空间。
2、浮动元素会停留在父级元素的左边或右边，或者停留在其他浮动元素的边缘。
3、浮动元素只会在当前行内浮动。
4、浮动元素依然位于父级元素内。
5、浮动定位可以让多个块级元素在一行显示。
注：当浮动和display连用时，出现空格可以用font-size：0；或者margin：10px解决。
三、浮动定位的语法
float

float:right;/*右浮动*/
float:left;/*左浮动*/
float:none;/*默认，无浮动效果*/

注：当放在盒子里文本，浮动时，跟随盒子移动，此时占据当前位置的页面，再上来的盒子里的文本将无法在当前位置显示，需要增加页面空间才能在当前显示。
四、清除浮动
作用：元素的浮动不仅影响自己的位置，还会影响到后续元素，要想不被影响，就可以使用清除浮动
语法：

clear:left;/*清除左浮动：清除当前元素左浮带来的影响，当前元素不会上前展位并且不允许左边有浮动元素*/
clear:right;/*清除右浮动：清除当前元素右浮带来的影响，当前元素不会上前展位并且不允许右边有浮动元素*/
clear:both;/*清除左所有浮动：清除当前元素左浮和右浮带来的影响，当前元素不会上前展位并且不允许左边或右边有浮动元素*/

五、浮动元素对夫元素带来的影响
原因：由于浮动元素脱离了普通的文档流，不占据父元素页面空间，使的父元素无法撑起整个空间。
解决问题：
1.直接给父级元素设置高度
弊端：必须要知道父级准确的高度
2.设置父级元素的浮动
弊端：对后续的元素会有影响
3.设置父级元素overflow hidden或auto
弊端：如果子级溢出的话 会一起被隐藏
4.在父元素中追加一个空元素（子元素）并且设置他clear：both