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. Git - Git简介与客户端安装

    简介 Git是目前世界上最先进的分布式版本控制系统(没有之一)! 集中式版本控制系统(CVS/SVN),版本库是集中存放在中央服务器的,而一般工作的时候,用的都是自己的电脑,所以要先从中央服务器取得最 ...

  2. 随机的标识符GUID

    Guid guid = Guid.NewGuid();Console.WriteLine(guid.ToString());

  3. [转]UIPATH机器人指南

    本文转自:https://blog.csdn.net/weixin_33957036/article/details/80907372 介绍 机器人是UiPath的执行代理,可运行Studio中内置的 ...

  4. WordPress疑难问题以及解决方案汇总

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/101 WordPress疑难问题以及解决方案汇总: 最近这 ...

  5. 通过 RxSwift 优雅使用 NotificationCenter

    原文 纯粹的官方代码使用NotificationCenter真的很难用,但是有了RxSwift,就变得方便了很多. 修改 Podfile,通过pod引入RxSwift pod 'RxSwift' po ...

  6. MySQL 事务提交 --不良好的事务习惯。

    MySQL 事务提交 --不良好的事务习惯 我们知道"事务"是数据库区别于文件系统的重要特性之一.MySQL的InnoDB引擎中的事务也完全符合ACID(原子性 一致性 隔离性 持 ...

  7. 爬取编程常用词汇，保存为Excel

    编程常用词汇 import requests import openpyxl from lxml import etree import re url = 'https://www.runoob.co ...

  8. 201871010113-刘兴瑞《面向对象程序设计（java）》第十三周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  9. 201871010113-刘兴瑞《面向对象程序设计（java）》第十一周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>htt ...

  10. Windows如何连接Linux(CentOS 7.x)的redis

    参考链接:https://www.cnblogs.com/wangyang0210/p/10244479.html