浮动

定位主要使用的属性：float position z-index

z-index叫空间位置，必须和position配合使用，不能单独用

浮动大多数都是加在块级标记上

float:left /right /none;

1、给一个块级元素添加浮动时，不设置元素宽度的话，宽度会由原来的100%变为内容的宽，如果设置了宽度，就按设置的宽度显示，然后相应的左右浮动。

1、当前一个元素浮动之后，会对后面的元素造成影响，后面的元素会上去占据原来浮动的标记的位置，同时上去的元素内容会自动移动，以保证不会被浮动的元素遮盖住

2、下面的元素浮动，不会对上面的造成影响

3、两个相邻的元素同时设置浮动，这两个元素是会水平排列，宽变为各自内容的宽，后面的不会被覆盖

4、两个元素一起右浮动，会出现逆序

1、子元素浮动，父元素未设置高，会造成父元素塌陷问题，子元素不在支撑父元素，还有一个儿子未浮动，父元素由第二个儿子支撑。

2、父元素浮动，子元素没浮动，父元素会带着子元素一起浮动，出现子元素的浮动特点，子元素的宽变为内容的宽

3、父子元素同时浮动，它同时脱离文档流就，和父元素自己浮动时一样的效果

前两个元素都浮动，第三个元素会上去占据位置，不想让第三个浮动，就给第三个元素加clear：both

前两个元素

利用float和margin一起布局

面试题：清除浮动的方法

语法：clear：left right both

1、谁受浮动元素影响，给哪个元素浮动加clear

2、在他俩之间加一个空标记，给空标记设置clear。

目的：为了分工明确，更有利于读取代码，清晰

1、子元素浮动，父元素塌陷，给父元素一个高，子元素脱离文档流，宽高不会变

2、子元素浮动，父元素塌陷，给父元素加overflow:hidden;有一个弊端，父元素的内容会超出的文本隐藏