笔记25.2021-09-05

C1任务-25：浮动

任务背景

浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。后可用于所有元素，在页面布局中发挥重要作用

任务目标

理解CSS浮动属性
掌握浮动布局

任务训练

1.float属性设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性
元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

float属性值

2.clear属性用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方

在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开
main后的footer元素在页面布局时无法在main后正常显示（如图1

3.section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方

4.浮动布局
浮动在布局中最常用于实现两列布局或三列布局
在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可
以下为三列布局的简单实现代码

练习题

.现要求将main中的section元素在一行排列，请补全代码片段

元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素将所有section元素都向左浮动后，元素可在一行排列
答：float