HTML基础篇--float浮动和position定位

HTML float浮动

一、什么是浮动布局？

即通过设置float使元素从左向右或从右向左排列，从而达到布局的目的，浮动的元素超出父级时，会还换行继续同方向排列。

二、浮动元素的特征？

 1、浮动元素不占用父级宽高；

  2、浮动元素都在一行内显示；

  3、浮动元素都可以设置宽高；

  4、浮动元素默认内容撑开父级宽高；

  5、可以去除浏览器的默认缝隙；

  6、浮动元素标签会发生重叠，但是内容不会；

  7、浮动元素的上下外边距是相加显示，不浮动时是叠加显示。

三、清楚浮动的方式？

  1、使用clear: both;(left/right) 清楚前一个浮动造成的影响，弊端是会增加一个元素；

  2、使用overflow: hidden;添加给浮动元素的父级元素。

四、position定位机制？

css中一共有三种基本定位机制：普通流、浮动、绝对定位。

如果不特殊指定，所有标签都在普通文档流中定位。

块级元素从上到下一个接一个的排列，框之间的处置距离是由框的垂直外边距来计算出来。

行内框在一行中水平布置，可以使用水平内边距、边框和外边距来调整他们之间的间距。

五、position属性？

  1、static元素框正常生成（默认值），块级元素生成一个矩形框，行内元素则会创建一个或多个行框，至于其父元素中；

  2、relative（相对定位）元素框便宜某个距离。元素仍然保持原形状，原位置保留，其他元素相对于他移动；

  3、absolute（绝对定位）元素框从文档流中删除，并相对其父级定位。原占空间消失。元素定位后生成一个块元素，而不论其在原文档流中生成何种类型的框；

  4、fixed（固定定位）相对浏览器窗口定位。

转载于:https://my.oschina.net/GodH5/blog/639519