黑马程序员技术交流社区

标题: 技术帖 [打印本页]

---

作者: 杨露露    时间: 2019-7-24 14:20
标题: 技术帖


什么是浮动（float）？概念：元素的浮动是指设置了浮动的元素会
1、脱离标准普通流的控制
2、移动到指定位置
作用：
1、让多个盒子（div）水平排列一行，使得浮动成为布局的重要手段。
2、可以实现盒子的左右对齐等等、
3、浮动是最是用来控制图片，实现文字环绕图片的效果的、
语法：
在CSSZ中，通过float 中文，浮 漏 特 的属性定义，语法如下：
选择器 { float: 属性值; }
none 是元素不浮动、
left 元素向左浮动、
right 元素向右浮动、
1）浮动口诀之“浮”
浮---漂浮在普通流的上面。脱离标准流、俗称“脱标”
[attach]293506[/attach]
.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, 下载次数: 5)

下载附件

2019-7-24 13:45 上传

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2