浮动（css）

       浮动

---

 

浮动的最直观表现就是：

• 通过浮动可使一个元素向其父元素的左侧或右侧移动

其基本语法就是：

　　　　　　　　选择器{float:属性值;}

float：none   默认值，元素不浮动

　　　left       向左浮动

　　　right     向右浮动

需要注意的就是元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素下边的还在文档流中的元素会自动向上移动

浮动元素的特点我总结了以下几条：

1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
2. 设置浮动以后元素会向父元素的左侧或右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或向右移动时，水平方向不会超过它前边的其他浮动元素
5. 垂直方向上浮动元素不会超过它上边浮动的兄弟元素，顶多就是一样高
6. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

说完浮动，我们再来说一下怎么清除浮动.

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

它的基本语法就是：

　　　　　　选择器{clear:属性值;}

属性值 描述

• left 不允许左侧有浮动元素（清除左侧浮动的影响）
• right 不允许右侧有浮动元素（清除右侧浮动的影响）
• both 同时清除左右两侧浮动的影响

最后我们总结一下浮动带来的影响和解决办法

• 问题：
  由于盒子模型默认父盒子不设宽高，如果盒子内的所有元素都浮动，会造成父盒子没有高度，打乱了后续的所有排列
• 解决办法：

一.手动设置父盒子的宽高

二.设置溢出隐藏

overflow:hidden

三.在父盒子内最后增加一个空的div，设定这个div清除浮动，以固定该位置来撑开父盒子的高度

四.伪元素设定：设定一个伪元素，内容为空且为块级元素，清除前后浮动影响，撑起父盒子的高度

div ::after{
    display:block;
    content:'';
    clear:both;
}

其实在开发过程中，我们能不用浮动则不用，它的主要用途就是去空格，使用float：left；因为使用right它的左右位置会颠倒。