CSS浮动与图标字体详解

一、浮动的基本概念1.1 为什么需要浮动在文档流中块级元素默认是垂直排列的从上到下依次排开。如果我们想让块级元素在页面中水平排列就需要让它们脱离文档流而浮动float​ 就是实现这一效果的重要方式。1.2 float属性选择器 { float: none | left | right; }属性值说明none默认值元素在文档流中正常排列left元素向父元素左侧浮动right元素向父元素右侧浮动二、浮动的特点2.1 脱离文档流元素设置浮动后会脱离文档流不再具有文档流中的特性块元素不再独占一行行内元素可以设置宽高行内块元素不再有3像素空白问题2.2 位置变化元素脱离文档流后原来在文档流中的位置不保留后面的元素会挤上来占据原来的位置2.3 排列限制特性说明兄弟元素浮动元素不会超过前一个兄弟元素如果前一个兄弟也浮动最多一边齐父元素范围浮动方向仅限于父元素范围内文字环绕浮动元素不会覆盖文字文字会环绕在浮动元素四周2.4 文字环绕效果这是浮动最初的设计目的——实现文字环绕图片的效果。div idbox div classbox1 boxbox1/div p这是一段文字它会环绕在浮动元素周围显示形成类似报纸排版的效果。/p /div三、浮动引发的问题高度塌陷3.1 问题描述当父元素不设置固定高度靠后代元素撑开时如果后代元素设置了浮动就会脱离文档流不再占据原来的位置导致父元素高度丢失页面布局出现混乱。3.2 解决方案方法一设置固定高度.outer { height: 360px; /* 缺点无法自适应内容高度 */ }方法二开启BFC块级格式化上下文.outer { overflow: hidden; /* 或其他非visible值 */ }方法三使用clear属性 空元素div classouter div classinner/div div classbox2/div !-- 增加空块元素 -- /div.box2 { clear: both; /* 清除浮动影响 */ }方法四使用伪元素推荐.outer::after { content: ; display: table; clear: both; }四、清除浮动影响4.1 clear属性选择器 { clear: none | left | right | both; }属性值说明none默认值不清除浮动left清除左侧浮动元素的影响right清除右侧浮动元素的影响both清除两侧浮动元素的影响4.2 应用场景当需要让某个元素不受前面浮动元素影响时可以使用clear属性。div classbox1box1左浮动/div div classbox2box2右浮动/div div classbox3box3清除浮动保持原位/div.box3 { clear: both; }注意clear属性只能清除前面的浮动元素对当前元素的影响。五、综合解决方案clearfix5.1 同时解决两个问题在实际开发中我们经常需要同时解决父子外边距重叠和高度塌陷两个问题。一个通用的解决方案是使用clearfix类。.clearfix::before, .clearfix::after { content: ; display: table; clear: both; }5.2 使用示例div classbox1 clearfix div classbox2/div /div div classbox3 clearfix div classbox4/div /div5.3 工作原理伪元素解决的问题::before防止子元素上外边距传递给父元素::after清除子元素浮动导致的高度塌陷六、图标字体技术6.1 什么是图标字体图标字体是一种将图标封装为字体的技术它把矢量图形制作成字体文件然后像使用普通文字一样使用图标。6.2 图标字体的优势优势说明文件体积小​相比图片文件更轻量样式灵活​可以像文字一样设置颜色、大小等样式缩放无损​矢量图标放大缩小不失真6.3 引入方式方式一本地引入link relstylesheet href./font/iconfont.css方式二CDN引入link relstylesheet hrefhttps://at.alicdn.com/t/c/font_5044424_cr789b5zf5a.css6.4 三种使用方式方式一类名方式推荐i classiconfont icon-sousuo s1/i方式二实体方式i classiconfont s1#xe7e6;/i方式三伪类方式i classs1 iconfont/i.s1::before { content: \e60a; }6.5 交互效果实现.search:hover { background-color: orange; } .search:hover .s1 { color: #fff; }七、重要注意事项知识点说明浮动用途​主要用于实现文字环绕效果和水平布局高度塌陷​使用浮动时必须考虑高度塌陷问题并及时解决清除浮动​伪元素清除浮动是现代布局中最常用的方法clear属性​只能清除前面的浮动元素对当前元素的影响图标字体​现代网页设计的常用技术推荐使用类名方式引用DOOE类型​正确使用DOCTYPE确保浏览器正确渲染八、总结本文详细介绍了CSS浮动和图标字体的核心知识点浮动基础float属性的使用和浮动元素的特点高度塌陷问题的产生原因及四种解决方案清除浮动clear属性的使用和clearfix综合方案图标字体引入方式、三种使用方法及交互效果实现掌握这些知识后你将能够灵活运用浮动进行页面布局并使用图标字体提升页面的视觉效果和开发效率。