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. 清新水彩追梦在路上述职报告通用PPT模板

    清新漫画风,轻松可爱模版来源:  http://ppt.dede58.com/gongzuohuibao/26566.html

  2. Javascript 的定时器 setInterval,setTimeout,clearInterval

    今天开通博客.来1个.哇哈哈哈~~ 今天本来想复习BOM的看到定时器也算DOM一种 ?(是这样吗).分享一下 参考源于:八神吻你 http://www.cnblogs.com/lmfeng/archi ...

  3. 【Nginx】安装&环境配置

    安装依赖包 安装make:yum -y install gcc automake autoconf libtool make 安装g++:yum -y install gcc gcc-c++ 安装pc ...

  4. python虚拟环境virtualenv下安装MySQL-python（1.2.3）

    该文章很有用建议收藏 我们在Windows下开发python应用时,可能需要安装各种第三方模块,但如果又不想污染公共的python环境,怎么办呢?最好是在各自的 python工程中创建一个virtua ...

  5. May 26th, 2019. Week 22nd, Sunday

    A real loser is somebody that's so afraid of not winning, they don't even try. 真正的失败者,是那些因为害怕不能成功,就连 ...

  6. mac电脑安装php7

    1.安装 homebrew https://www.jianshu.com/p/abea83253671 /usr/bin/ruby -e "$(curl -fsSL https://raw ...

  7. sqliteman

    2.安装文件 采用源码方式安装 可用下面地址自行下载 https://sourceforge.net/projects/sqliteman/files/sqliteman/1.2.2/ 3.安装 1) ...

  8. HDL的三种描述方式

    结构化描述 结构化描述方式是最原始的描述方式,是抽象级别最低的描述方式,但同时也是最接近于实际的硬件结构的描述方式.结构化的描述方式,思路就像在面包板上搭建数字电路一样,唯一的不同点就是我们通过HDL ...

  9. LG1840 Color the Axis 线段树

    菜的人就要写简单题 为了练习手速来写这样一道 珂朵莉树 线段树简单题 没啥可说的,注意修改操作中要判一下 val=0 #include<bits/stdc++.h> using names ...

  10. python中append的使用

    没有系统地学习过python,最近在append的使用上遇到了大问题,吃到了苦头 之前一直单纯地认为通过append把数添加到list中,不需要提前开空间,非常便利,但却没有意识到这个过程并不是值传递 ...