A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

杨露露

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© 杨露露 初级黑马   /  2019-7-24 14:20  /  943 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 杨露露 于 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属性,类似转换为了行内快,但是元素之间没有空白缝隙。

SN2B~[_TL[QVJK}$M34TK)9.png (4.74 KB, 下载次数: 3)

SN2B~[_TL[QVJK}$M34TK)9.png

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马