CSS浮动布局2
时间：2023-09-06 19:48:01 | 来源：网站运营
时间：2023-09-06 19:48:01 来源：网站运营
CSS浮动布局2：今天写的有点晚，抱歉，那么开始吧，这期补充一下浮动与清除浮动的概念。
1.1 浮动的作用早期的作用：图文环绕
现在的作用：网页布局
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
2.1浮动的代码属性名：float
属性值：
3.1 浮动的特点1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 • 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果 • 一行可以显示多个 • 可以设置宽高
注意点： 浮动的元素不能通过text-align:center或者margin:0 auto
2.1书写网页导航的一些小tips1. 清除默认的margin和padding
2. 找到ul，去除小圆点
3. 找到li标签，设置浮动让li一行中显示
4. 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高
• 方法一：给a标签设置 display : inline-block
• 方法二：给a标签设置 display : block
• 方法三：给a设置 float : left
2.2清除浮动的介绍含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标 → 不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
2.3清除浮动的方法1、直接设置父元素高度
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表
2、额外标签法
操作： 1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
3、单伪元素清除法
操作：用伪元素替代了额外标签
4、双伪元素清除法
优点：项目中使用，直接给标签加类即可清除浮动
5、给父元素设置overflow : hidden
1. 直接给父元素设置 overflow : hidden
优点：方便
（拓展补充）BFC的介绍块格式化上下文（Block Formatting Context）：BFC
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，
也是浮动元素与其他元素交互的区域。
创建BFC方法：
1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内块元素是BFC盒子
4. overflow属性取值不为visible。如：auto、hidden…
5. ……
BFC盒子常见特点：
1. BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
在线咨询
