float属性及清除浮动

float属性及清除浮动

float属性

float 属性定义元素在哪个方向浮动。目前所有主流浏览器都支持 float 属性。
属性值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

1.浮动对自己的影响

块级元素/行内元素设置成浮动属性后会自动生成块级框（块级框有inline-block属性–宽高可以设置，如果不设置宽高则会由内容撑开，在一行显示）

2.浮动对周围的影响

一.多个浮动元素同时存在时

<style>
    .divFloat{width: 100%;}
    .div1{float: left;height: 40px;width: 100%; background-color: red;}
    .div2{float: left;height: 40px; width: 100%;background-color: yellow;}
    .div3{float: left;height: 40px; width: 100%; background-color: blue;}
</style>
<div class="divFloat">
    <div class="div1">我是向左浮动元素,宽度100%</div>
    <div class="div2">我是向左浮动元素,宽度100%</div>
    <div class="div3">我是向左浮动元素,宽度100%</div>
</div>

图片:

<style>
    .divFloat{width: 100%;}
    .div1{float: left;height: 40px;width: 10%; background-color: red;}
    .div2{float: left;height: 40px; width: 10%;background-color: yellow;}
    .div3{float: left;height: 40px; width: 10%; background-color: blue;}
</style>
<div class="divFloat">
    <div class="div1">我是向左浮动元素,宽度10%</div>
    <div class="div2">我是向左浮动元素,宽度10%</div>
    <div class="div3">我是向左浮动元素,宽度10%</div>
</div>

图片:

二.浮动元素与非浮动元素共存时

1. 浮动元素的上一级是非浮动的块级元素
   块级浮动元素独占一行，向下顺序排列；不重叠块级浮动元素独占一行，向下顺序排列；不重叠
   
2. 浮动元素的上一级是非浮动的行内元素
   如果同行有足够的宽度容纳浮动元素，则浮动元素会与行内元素占据同一行（否则重起一行），且浮动元素位于最左（右）侧，不重叠，但会改变行内元素布局。
   
   
3. 浮动元素的下一级是非浮动的块级元素
   文字内容不会上移重叠，边框，背景会向上移动发生重叠
   
   
   若此时下方再右非浮动的块级元素出现，会与下方文字重叠
   
4. 浮动元素的下一级是非浮动的行内元素
   如果同行有足够的宽度容纳非浮动行内元素，则非浮动行内元素会与浮动元素占据同一行（否则重起一行），且浮动元素位于最左（右）侧，不重叠，但会改变行内元素布局。
   
   
   
   注：行内浮动元素和块级浮动元素有相同的特性
   总结：1.浮动元素会尽可能的向顶端对齐，向左或向右对齐。
   2.浮动元素的高不会超过其上（下）内联元素的高。
   3.浮动元素的下放为块级元素时才会发生重叠现象

三.非浮动元素包含浮动元素时

1. 浮动元素的margin不会超过包含块的padding

四.float属性用途

1. 实现文字环绕
   float属性的本质即实现文字环绕功能，
2. 实现多列布局
   例如：实现三列布局，两侧列固定宽度，中间列自适应；

<style>
   .divFloat{ width: 100%; }
   .div1{ float: left; height: 1000px;  width: 400px; background-color: red;  }
   .div2{  float: right; height: 1000px; width: 400px;  background-color: yellow; }
   .div3{ height: 1000px;  width: auto; background-color: blue;}
</style>
<div class="divFloat">
   <div class="div1">我是左侧浮动元素float: left;,宽度400px</div>
   <div class="div2">我是左侧浮动元素float: right;,宽度400px</div>
   //注意float:left标签和float:right标签必须相邻；
   <div class="div3">我是中间自适应内容 width:auto</div>
</div>

清除浮动

为什么需要清除浮动？
浮动元素的本质是用来设置文字环绕。当元素设置成浮动属性时，其会脱离文档流形成块级框，直接影响周围元素的排列。因此需要清除浮动。针对不同的场景右不同的清除浮动的方式：

1. 使用伪类清除

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

2. 增加标签清除

.clearfloat{clear:both}

这有较为全面的清除浮动的方法总结 前端知识随笔.