float：none | left | right

默认值：none

适用于：所有元素

none：设置对象不浮动left：设置对象浮在左边right：设置对象浮在右边

  • 当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
  • float在绝对定位和display为none时不会被应用。
  • 什么时候用浮动？--让元素变成一行，水平布局时、需要文本环绕效果时
  • 浮动的特点，半脱离文档流，且会对后面的元素产生影响。

    1、父级没有设置高度的时候，会出现塌陷
    2、父级的宽度不够，会换行排列
    3、改变元素类型 变成行内块

  • 清除浮动float的三种方法
  1. 对后面的元素进行操作。

给后面元素添加，clear：both;

1.1额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2触发BFC效果。

通过触发BFC方式，实现清除浮动

父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3对父元素进行操作.

3.1父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3.2使用after伪元素清除浮动（推荐使用）

3.3使用before和after双伪元素清除浮动

css 关于浮动float的使用以及清除浮动的更多相关文章

  1. CSS那些事儿-阅读随笔3（清除浮动）

    浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both ...

  2. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  3. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  4. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  5. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  6. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  7. 父类清除浮动的原因、（清除浮动代码，置于CSS中方便调用）

    浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现.但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题: 1.浮动的元素会 ...

  8. 关于浮动&关于BFC规范&whyoverflow清除浮动

    https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...

  9. CSS(7)--- 通俗讲解清除浮动

    CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...

随机推荐

  1. Java后端高频面试题汇总

    Java后端面试题汇总 近来,分专题更新了Java后端面试题,此文章对这些文章做一个目录式的整理,方便查看 1.Java基础   https://www.cnblogs.com/autism-dong ...

  2. Vue Cli3 中别名的配置问题

    Vue Cli3 中别名的配置问题 vue-cli3中是没有config.build等目录的,这是因为vue-cli3中将这些配置隐藏起来了,如果想要修改,可以在vue.config.js文件中进行修 ...

  3. [转]RPA认证 Developer UIPath Certificate,细说uipath认证学习，Online Quiz和Practical Exam项目详解

    本文转自:https://blog.csdn.net/u010369735/article/details/88621195 UIPath,RPA里算是比较简单易操作的一款软件了,因为公司业务的需要, ...

  4. 【Gradle】Gradle插件

    Gradle插件 插件的作用 把插件应用到项目中,插件会扩展项目的功能,帮助在项目构建过程中做很多事情. 1.可以添加任务到项目中,帮助完成测试.编译.打包等. 2.可以添加依赖配置到项目中,可以通过 ...

  5. Oracle 两个逗号分割的字符串，获取交集、差集的sql实现过程解析

    Oracle数据库的两个字段值为逗号分割的字符串,例如:字段A值为“1,2,3,5”,字段B为“2”.想获取两个字段的交集(相同值)2,获取两个字段的差集(差异值)1,3,5. 一.最终实现的sql语 ...

  6. [20191108]内核参数tcp_keepalive与sqlnet.ora expire_time的一些总结.txt

    [20191108]内核参数tcp_keepalive与sqlnet.ora expire_time的一些总结.txt --//前几天在做12c DCD SQLNET.EXPIRE_TIME相关测试时 ...

  7. Linux—系统管理

    查看Linux系统版本                                                                    CentOS系统 # centos7查看命 ...

  8. jq Sortable的使用

    本文仅做翻译记录查看,GitHub原项目地址: https://github.com/RubaXa/Sortable/ ,建议将Sortable.js下载到本地,GitHub上的例子在复制到本地运行, ...

  9. 【python爬虫】正则表达式

    一.数据的分类 1.结构化数据 特点:数据以行为单位,每一个数据表示一个实体.每一行数据的属性都是一样的. 举例:关系型数据库中的表就是结构化数据. 处理方法:sql 2.半结构化数据 特点:结构化数 ...

  10. hdu6521 吉司机线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=6521 待填 代码 #include<bits/stdc++.h> #define ls o<& ...