本帖最后由 杨露露 于 2019-7-24 14:23 编辑
什么是浮动(float)?概念:元素的浮动是指设置了浮动的元素会
1、脱离标准普通流的控制
2、移动到指定位置
作用:
1、让多个盒子(div)水平排列一行,使得浮动成为布局的重要手段。
2、可以实现盒子的左右对齐等等、
3、浮动是最是用来控制图片,实现文字环绕图片的效果的、
语法:
在CSSZ中,通过float 中文,浮 漏 特 的属性定义,语法如下:
选择器 { float: 属性值; }
none 是元素不浮动、
left 元素向左浮动、
right 元素向右浮动、
1)浮动口诀之“浮”
浮---漂浮在普通流的上面。脱离标准流、俗称“脱标”
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
2)浮动口诀之“漏”
漏---把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置,是脱离标准流的,我们俗称“脱标”
.box1 {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
/* 让第 1 个盒子漂浮起来,不占位置 */
float: left;
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
所以,box2下面的其实就是跑到box1盒子下面了,被盒子box1给压住了,遮挡起来了。
3)浮动口诀之特
特---特性float属性会改变元素display属性。
任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何元素,生成的块级框和我们前面的行内快及其相似。
div 水平排列:
div {
width: 200px;
height: 200px;
background-color: pink;
/* 转换为行内块元素,可以水平显示,不过 div 之间有间隙,不方便处理 */
/* display: inline-block; */
/* 设置浮动属性,可以让 div 水平排列,并且没有间隙 */
float: left;
}
.two {
background-color: hotpink;
}
注意:浮动的元素互相贴靠在一起的,如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
浮动小结:
我们使用浮动的核心目的--让多个块级盒子同行显示。
float---浮漏特
浮 加了浮动的盒子是浮动起来的,漂浮在其他标准流盒子的上面。
漏 加了浮动的盒子是不占位置的。他原来的位置漏给了标准流的盒子。
特 特别注意:浮动元素会改变display属性,类似转换为了行内快,但是元素之间没有空白缝隙。
|
|