通过浮动,可以使一个元素向其父元素的左侧或右侧移动
使用float 属性设置子元素的浮动
可选值:
none 默认值,元素不浮动
left 元素向左浮动
right 元素向右浮动
注意:元素设置为浮动以后,水平布局的等式不需要强制成立
元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的 还在文档流中的元素会自动向上移动。
浮动的特点:
1.浮动元素会完全脱离文档流,不再占据文档中的位置;
2.设置浮动以后,元素会向父元素左侧或右侧移动;
3.浮动元素默认不会从父元素中移出;
4.浮动元素向左或向右移动时,不会超过它前边的其它浮动元素;
5.浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高。
注意:
元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生改变。
1.脱离文档流的特点:
块元素:
1.块元素不再独占一行;
2.脱离文档流后,块元素的宽度和高度由其内容撑开;
行内元素:
行内元素设置浮动后,变为块元素(可以设置宽高);
脱离文档流后,就不用再区分行内元素和块元素。
浮动的作用:
1.让页面中的元素可以水平排列;
2.通过浮动可以制作一些水平方向的布局。