技术帖【黑马web前端】

更新时间:2023年03月06日 11时29分52秒来源:黑马程序员论坛

什么是浮动（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, 下载次数: 0)

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

技术帖【黑马web前端】

最新资讯

相关阅读