float浮动,用于横向布局。

起初的横向布局都用display:inline-block,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格:font-size:0;,但影响很大。
 
float浮动会破坏line-box,即浮动元素脱离文档流(当给一个元素设置浮动了之后,它不会再占用页面当中的“位置”了),造成的影响:不会撑开父级的高度。如下图:
想要解决这个影响,就得清浮动(清除浮动所造成的影响)了。
清浮动后,如下:
清浮动的方法:
1.给浮动元素的父级加高度
  拓展性不好
  在不能确定父级高度的情况下不能使用
 
2.clear:both(用得最多的方法)
  *zoom:1 用来触发 hasLayout(IE浏览器的BFC)
.clear{
*zoom:;/*兼容IE6,7*/
}
.clear:after{
content: '';
display: block;
clear: both;
}
3.BFC(是一套渲染机制)
  触发一个元素的BFC(Block Formatting Contexts,即块级格式化上下文)
  相当于在这个元素里面建立起一堵围墙
  围墙里面的内容和围墙外面的内容不会产生干扰,如:
overflow: hidden;
想要触发BFC的方式(满足任一条件即可):
(1)float的值不为none;
    (2)overflow的值不为visible;
    (3)display的值为inline-block, table-cell, table-caption, flex, inline-flex之一;
    (4)position的值不为static或则releative中的任何一个。

float浮动-清浮动BFC渲染机制的更多相关文章

  1. BFC渲染机制

    BFC(block formatting context):块级格式化上下文(实际就是一个隔离罩) W3C CSS2.1 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元 ...

  2. CSS清浮动处理(Clear与BFC)

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

  3. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  4. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  5. CSS定位机制:浮动 float及清除浮动的常用方法

    CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...

  6. 关于浮动与清浮动 float

    浮动常见的几种属性值 float {left;  right;  none;  } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...

  7. float布局打破标准流,神助攻clear清浮动

    布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...

  8. CSS清浮动

    × 目录 [1]定义 [2]方法 [3]兼容 前面的话 人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题 定义 clear 清除 值: left | right | both | non ...

  9. Python12/10--前端之display/overflow使用/清浮动的方式

    display: 1.inline 同行显示,当一行显示不下.多余的就会换行显示, 不支持的css样式:不支持宽高,不支持行高(行高会映射给父级) 不支持margin上下,content由 文本内容撑 ...

随机推荐

  1. Hadoop源码分析:Hadoop编程思想

    60页的ppt讲述Hadoop的编程思想 下载地址 http://download.csdn.net/detail/popsuper1982/9544904

  2. Javascript中的this关键字用法详解

    在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...

  3. IntelliJ IDEA 使用 Git 并将 GitHub 作为远程代码仓库

    安装本地Git 官方下载地址:http://git-scm.com/downloads 不过这个地址一般下不动,我们可以选择在腾讯软件中心下载,速度很快. 腾讯软件中心的下载地址:https://pc ...

  4. [Swift]LeetCode13. 罗马数字转整数 | Roman to Integer

    Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...

  5. [Swift]LeetCode386. 字典序排数 | Lexicographical Numbers

    Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,10,11,1 ...

  6. 非对称加密技术里面,最近出现了一种奇葩的密钥生成技术,iFace人脸密钥技术

    要说到非对称加密技术啊,得先说说对称加密技术 什么是对称加密技术 对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥加密. 也就是密钥也可以用作解密密钥,这种方法在密码学中叫做对称 ...

  7. 一个std::sort 自定义比较排序函数 crash的分析过程

    两年未写总结博客,今天先来练练手,总结最近遇到的一个crash case. 注意:以下的分析都基于GCC4.4.6 一.解决crash 我们有一个复杂的排序,涉及到很多个因子,使用自定义排序函数的st ...

  8. Linux 设置自启动服务

     0 为停机,机器关闭.(千万不要把initdefault设置为0 )    1 为单用户模式,就像Win9x下的安全模式类似.    2 为多用户模式,但是没有NFS支持.    3 为完整的多用户 ...

  9. RecyclerView与ListView 对比浅析:缓存机制

    一. 背景 PS:相关知识:ListView与RecyclerView缓存机制原理大致相似,如下图所示: 滑动过程中,离屏的ItemView即被回收至缓存,入屏的ItemView则会优先从缓存中获取, ...

  10. 版本管理工具Git(一)简要介绍

    版本管理工具不但可以备份而且还能记录版本,也就是同一个东西不同时期的状态同时可以跟踪追溯.版本管理工具由CVS.SVN.Git.GitHub. 最早的版本管理工具CVS,因为多人开发项目导致工作很难协 ...