css的float详解

float深入剖析

float也即浮动,在css中修饰元素让该元素脱离文档流,能够在其所处父元素内靠左或靠右显示。

划重点:脱离文档流,靠左、右显示是指在父元素区域内靠左、右或紧邻其他浮动元素,浮动元素不会占用文档流空间(相对于块级兄弟元素来说)。

1、浮动元素不会占用父元素空间,因此他不会撑开父元素的宽、高,如果某父元素内只有浮动元素,则该父元素会塌陷。

2、浮动元素后的兄弟元素若为内联元素则会紧随浮动元素摆放,若为块级元素则会忽略该浮动元素按照文档流的规则进行摆放。

3、float存在的意义是为了让实现文字环绕图片的效果。

4、清除浮动clear:none/left/right/both

本来想说详细的全面的总结一下float的特性,但由于小白本人水平有限,涉及到的内容很繁杂,所以只粗浅的总结,方便自己日后回顾。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,273评论 1 91
  • CSS布局模型 布局:将元素以正确的大小摆放在正确的位置上 CSS包含3种基本的布局模型流动模型(Flow)浮动模...
    _空空阅读 618评论 0 4
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,118评论 0 6
  • 数年前,当开发者首次开始不使用table 来布局网页时,CSS中的一个property突然间显得格外重要,该属性就...
    花括弧阅读 204评论 0 2
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,087评论 0 5
  • 又到了一年的母亲节,先向全世界伟大的母亲们献上我深深的敬意。 (康乃馨,图片来源于网络) 说起母亲节,很多人都会想...
    32ec81fc7510阅读 5,438评论 0 6
  • 一、问答 如何调试 IE 浏览器 IE7以上使用控制台调试 IE6用border或者outline来识别元素边界调...
    饥人谷_吴亚敏阅读 206评论 0 0