浮动的基础知识

广东信息科技职业培训学院

广信IT学院

技术文献总结装订册

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

年级：21级1班     姓名：李凯顺        性别： 男     籍贯：湖南

毕业中学： 冷水中心校        入学时间：  2020年8月1日              

身份证号码：431126200505070271微信号：lks2423973507

本技术文献起止时间 2021年 10月 17日～ 2021年 10 月 18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                                

                文献目录

顺序	文献编号	文献类型	题目	开发工具	关键技术
01		专题技术文献	浮动的基础知识	DW	DW
02

备注：“文献编号”由学院工作人员填写；文献类型填写“专题技术”或“项目研发”

广东信息科技职业培训学院编制

评  分

文献总分：        折算后标准分：       阅卷教师签名

（有效）专题技术文献评分

序 号	题目	各项评分				文献 得分
		主题 深浅 （20）	描述 清晰 （40）	图文 搭配 （20）	分享 评定（20）
01	浮动的基础知识
02
专题技术文献平均分：   文献数量加分：      篇x10分/篇=     分 专题技术文献总分：

项目研发文献评分

序 号	题目	各项评分				文献 得分
		业务模块数量 （20）	模块复杂度 （30）	图文 描述 （30）	分享 评定（20）
01
02
项目研发文献平均分：   文献数量加分：      篇x10分/篇=     分 项目研发文献总分：

备注：

1、分享评定：发表到指定的3个网站，成功1个加5分，成功2个加10分，成功3个加20分。

2、实际总分=专题技术文献平均分+项目研发文献平均分*3。

3、所有文献必须提交对应的程序源码和项目演示视频，按照表格题目命名，放在同一个文件夹。

4、文献和源码、视频等文件，统一放到一个文件夹里面并提交给班长，文件夹命名格式如：

“广信IT17-1张悦190119文献与源文件”。

文献种类：专题技术总结文献

开发工具与关键技术：   DW                            

作者：李凯顺      ；年级：21级1班    ；撰写时间：2021   年 10  月  18 日

文献编号：                归档时间：   年   月   日

浮动的基础知识~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW

作者：李凯顺

撰写时间：2021/10/18

1.定义和用法：

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。

2.浮动(float)的三个属性值：

left：元素向左浮动

right：元素向右浮动

none：默认值，元素不浮动，并会显示在其在文本中出现的位置;

inherit：规定应该从父元素继承 float 属性的值。

3.清除浮动（clear）的三个属性值：

left：清除左侧浮动

right：清除右侧浮动

both：左右两边浮动

清除浮动的三个方法

4.额外标签法

在需要清除浮动效果的元素后添加一个无内容块级标签，并设置属性clear来清除浮动

示例：

 

5.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

6.伪元素清除浮动

在需要清除浮动效果的父元素上 通过::after的伪元素来设置清除浮动。需要注意的是伪元素默认行内元素，需要设置为块级元素才能达到效果。

示例：

 

通过给父元素设置overflow属性值为hidden或者auto来清除浮动

示例：

 

7.通俗解释：浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear(清除浮动)的属性值。

这是我所学到的HTML基础知识，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！