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(固定定位)相对浏览器窗口定位。