一、浮动导读
1.1 什么是浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框边缘
语法:
选择器 { float : 属性值 ;}
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动(默认值) |
1.2 浮动特性
①设置了浮动(float)的元素最重要特性:
- 脱离标准普通流的控制(浮)移动到指定位置(动)。俗称(脱标)
- 浮动的盒子不再保留原先的位置
②如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
③浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原来是什么模式的元素,添加浮动之后具有行内块元素的特性。
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但添加浮动之后,它的大小根据内容决定
- 浮动的盒子中间是没有缝隙的,是紧挨着一起的
- 行内元素同理
1.3 网页布局准则
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
网页布局第二准则:先设置盒子大小,再设置盒子位置
由2可以推断出,一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。
案例1:
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
float: left;
width: 296px