要想彻底清除浮动的影响，适合的属性不是 clear 而是 overflow。

一般使用 overflow:hidden，利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。

1. 前言：

我们都知道overflow:hidden的字面意思是超出隐藏，说到这个超出隐藏就跟父元素的高度有关了，高度一定了的时候，超出隐藏才有依据。

我们知道当子元素开始浮动了，会脱离文档流，其父元素的高度就会变为0，这个时候页面其他元素就会向上占据位置，就会导致页面混乱。

这个时候我们在父元素设置overflow:hidden,就解决了页面混乱的问题。

2. overflow:hidden作用机制BFC：

定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。

作用：独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

那什么时候会触发 BFC 呢？常见的情况如下：

• <html>根元素；

• float的值不为none；

• overflow的值为auto、scroll或hidden；

• display的值为table-cell、table-caption和inline-block中的任何一个；

• position的值不为relative和static。

（以上主要是对张鑫旭老师的《css世界》以及其他作者的观点的做的知识梳理）

css中：overflow:hidden清除浮动的原理的更多相关文章

  1. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  2. css 中 overflow: hidden清楚浮动的真正原因

    1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...

  3. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  4. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  5. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  6. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  7. 关于css中overflow:hidden的使用

    overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容:     但是,小编在以往的使用中,发现了一个问题,只要父级容 ...

  8. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

  9. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

随机推荐

  1. mysql idb文件过大

    分开 保存,每个数据库有自己的 innodb_file_per_table=1

  2. 数据库连接中断-spring-springBoot

    问题:据库和应用在同一台机,数据库用mysql5.6.20,已经升级druid到最新的1.0.7版本,访问的是localhost的mysql,放一个晚上不访问,第二天访问就报错了,重启服务正常,错误提 ...

  3. 吴裕雄--天生自然python学习笔记：Python3 JSON 数据解析

    JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. Python3 中可以使用 json 模块来对 JSON 数据进 ...

  4. motionbuilder安装未完成，某些产品无法安装的解决方法

    motionbuilder提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装motionbuilder失败提示motionbuilder安装未完成,某些产品无法 ...

  5. 在shell下执行命令的方法

    在shell下执行命令的方法 1. #!/bin/sh 语法:在shell.sh的开头写入 #!/bin/sh 一般的shell脚本就是这种用法.这种方法调用脚本开头的shell执行命令,子shell ...

  6. Thymeleaf模板笔记

    1.常用标签: 使用thymeleaf模板,首要在html中引入: <html xmlns:th="http://www.thymeleaf.org"> 引入css.j ...

  7. gitlab两种连接方式:ssh和http对比

    共同点: 都可以使用git clone 地址 .将项目下载到本地. 不同点: 当将本地修改上传到远程服务器时,http需要输入用户名密码,ssh. 1.ssh方式: 这是一种相对安全的方式这要求将本地 ...

  8. C++中的大数乘的实现

    代码 来源:面试常考 大数加减乘除 #include <iostream> #include <vector> #include <string> using na ...

  9. Nginx笔记总结十四: nginx反向代理，用内网域名转发

    user www www; worker_processes ; error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile ...

  10. Selenium&Pytesseract模拟登录+验证码识别

    验证码是爬虫需要解决的问题,因为很多网站的数据是需要登录成功后才可以获取的. 验证码识别,即图片识别,很多人都有误区,觉得这是爬虫方面的知识,其实是不对的. 验证码识别涉及到的知识:人工智能,模式识别 ...