副队长CSS教程(22)–浮动

文章目录1. 什么是浮动2. 浮动核心特性3. 基础布局示例3.1 多列横向布局最常用3.2 图文环绕4. 浮动塌陷核心问题4.1 塌陷原因4.2 四大清除浮动方案4.2.1 给父容器设置固定高度4.2.2 空标签法老式写法4.2.3 overflow 开启 BFC便捷常用4.2.4 伪元素清除浮动推荐5. 浮动的优缺点5.1 优点5.2 缺点6. 小结1. 什么是浮动网页元素默认遵循标准文档流从上到下、从左到右依次排列块级元素独占一行行内元素同行排列。float是 CSS 布局属性作用是让元素脱离标准文档流向左/向右靠拢排列主要用来实现块级元素横向并排、图文环绕。float:取值;float: none默认值不浮动元素正常处在文档流中float: left左浮动元素靠左侧依次排列float: right右浮动元素靠右侧依次排列2. 浮动核心特性1脱离标准文档流浮动元素不再占据文档流位置后方正常流元素会向上偏移。2.贴边排列浮动元素向指定方向靠拢碰到父容器边界、其他浮动元素就停止排列。3.文字环绕普通文字、行内内容不会被浮动元素遮挡会自动环绕在元素周围。4.具备行内块特点浮动后元素可同行显示同时支持设置width、height、内外边距。3. 基础布局示例3.1 多列横向布局最常用!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title浮动多列布局/titlestyle/* 父容器 */.wrap{width:600px;border:2px solid #333;}/* 子盒子 */.item{width:150px;height:100px;background:#87ceeb;margin:10px;/* 开启左浮动 */float:left;}/style/headbodydivclasswrapdivclassitem1/divdivclassitem2/divdivclassitem3/div/div/body/html效果三个原本独占一行的 div实现横向并排展示。3.2 图文环绕!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title图文环绕/titlestyleimg{width:150px;/* 图片左浮动实现文字环绕 */float:left;margin-right:10px;}/style/headbodyimgsrctest.jpgalt图片p这里是正文内容图片设置左浮动后文字会自动环绕在图片右侧和下方。这是浮动最经典的效果之一早年网页图文排版基本都依靠该特性实现。/p/body/html效果4. 浮动塌陷核心问题4.1 塌陷原因父容器未设置固定高度时高度由内部子元素撑开。子元素设置浮动后脱离文档流不再占用空间父容器失去支撑高度变为0进而造成页面布局错乱这就是浮动塌陷。上方多列布局代码里父容器wrap的高度未设置可以直观看到父容器边框缩成一条线无法包裹子元素。4.2 四大清除浮动方案清除浮动的核心目的让父容器重新识别浮动子元素恢复正常高度。4.2.1 给父容器设置固定高度.wrap{width:600px;height:120px;/* 手动设置固定高度 */border:2px solid #333;}优点写法简单全浏览器兼容缺点不支持自适应子元素尺寸变化后需同步修改代码效果4.2.2 空标签法老式写法在所有浮动元素末尾添加空标签设置clear: both。divclasswrapdivclassitem1/divdivclassitem2/divdivclassitem3/div!-- 空标签清除浮动 --divstyleclear:both;/div/divclear: both清除左右两侧浮动带来的影响。优点逻辑简单易理解缺点新增无意义标签代码冗余不符合语义化效果4.2.3 overflow 开启 BFC便捷常用给父容器添加overflow: hidden开启BFC块级格式化上下文BFC 区域会自动包裹内部浮动元素。.wrap{width:600px;border:2px solid #333;overflow:hidden;/* 一行代码清除浮动 */}优点代码简洁使用方便缺点容器内溢出内容会被隐藏存在使用场景限制效果4.2.4 伪元素清除浮动推荐定义公共样式类利用::after伪元素生成隐形元素清除浮动项目开发首选。/* 全局通用清除浮动类 */.clearfix::after{content:;display:block;clear:both;height:0;visibility:hidden;}使用方式给父容器添加clearfix类名divclasswrap clearfixdivclassitem1/divdivclassitem2/divdivclassitem3/div/div优点不改动结构、无冗余标签、支持自适应、兼容性优秀缺点需要提前定义样式类效果5. 浮动的优缺点5.1 优点语法简单学习成本低上手快速可轻松实现块级元素横向排列、图文环绕效果浏览器兼容性极强适合维护老旧项目5.2 缺点元素脱离文档流极易引发高度塌陷需要额外代码处理布局稳定性一般容易出现元素错位问题仅适配简单横向布局复杂弹性布局实现难度大需统一处理清除浮动逻辑增加代码维护成本6. 小结目前前端主流布局优先使用Flex、Grid布局更稳定、功能更全面基本不会出现塌陷问题。但浮动仍有学习必要一方面是维护老项目的必备技能另一方面也是理解文档流、梳理前端布局发展脉络的基础。