浮动

元素的浮动是指 设置了浮动属性的元素

  • 脱离标准普通流的控制
  • 移动到指定位置

作用

  • 让多个盒子(div)水平排列成一行 ,使得浮动成为布局的重要手段。
  • 可以实现盒子的左右对齐等等..
  • 浮动最早是用来 控制图片 ,实现 文字环绕图片的效果

语法

选择器 { float: 属性值; }
属性值 描述
none 元素不浮动( 默认值
left 元素向 浮动
right 元素向 浮动

特性

float 属性会让盒子漂浮在标准流的上面,并且不占有原来位置

任何元素都可以浮动。浮动元素会生成一个块级框,生成的块级框和我们前面的行内块极其相似

使用浮动的核心目的----让多个块级盒子在同一行显示

特点 说明
加了浮动的盒子 是浮起来 的,漂浮在其他标准流盒子的上面。
加了浮动的盒子 是不占位置的 ,它原来的位置 漏给了标准流的盒子
特别注意 :浮动元素会改变display属性, 类似转换为了行内块,但是元素之间没有空白缝隙

扩展

  • 子盒子的浮动参照父盒子对齐
  • 不会与父盒子的边框重叠,也不会超过父盒子的内边距
  • 浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流

清除浮动

父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,导致排版出现问题

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

选择器{clear:属性值;}
属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响
  • 额外标签法
<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
  • 父级添加overflow

  • after伪元素

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

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 双伪元素
.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
清除浮动的方式 优点 缺点
额外标签法(隔墙法) 通俗易懂,书写方便 添加许多无意义的标签,结构化较差。
父级overflow:hidden; 书写简单 溢出隐藏
父级after伪元素 结构语义化正确 由于IE6-7不支持:after,兼容性问题
父级双伪元素 结构语义化正确 由于IE6-7不支持:after,兼容性问题

results matching " "

No results matching " "

results matching " "

No results matching " "