要想彻底清除浮动的影响，适合的属性不是 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. 使用框架结构之frameset

    首先,我希望在你的目录下,有4个网页,各自显示不同的内容. 如图所示: 1.html显示"火影忍者" 2.html显示"英雄联盟" 3.html显示" ...

  2. markdown常见用法

      命令  生成目录  [TOC]  插入标题  # 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六季标题  插入shell 开头:```shell 结尾 ...

  3. jmeter接口压测的反思

    jmeter接口压测的反思 1.keepalive的坑:连接数满了,导致发起的请求失败. 2.token关联?是数据库取做参数化,还是随机数生成(需要改代码) 3.签名问题如何处理? 4.压测负载机端 ...

  4. sm3算法的简单介绍

    转自:https://blog.csdn.net/hugewaves/article/details/53765063 SM3算法也是一种哈希算法,中国国家密码管理局在2010年发布,其名称是SM3密 ...

  5. 博客已搬迁到 blog.vivym.xyz

    博客已搬迁到 blog.vivym.xyz

  6. Ubuntu上搭建GPU服务器

    1.安装显卡驱动 2.安装CUDA 3.安装cuDNN 下载: 根据显卡类型以及操作系统,选定CUDA版本和语言设置,下载对应的显卡驱动. 驱动下载地址 安装 $ sudo ./NVIDIA-Linu ...

  7. php数据库连接和mysql语句使用

    从简单的登录页开始学习. 前提:已经有一个html+css+js的静态网站 登录: php连接数据库,读取数据. <?php $username = root; $userpass = shao ...

  8. 【深入理解Java虚拟机】类的初始化过程

    类的初始化过程 类的加载过程.png 加载 将 Class 文件以二进制的形式加载到内存中 验证 校验 Class 文件是否安全,是否被正确的修改等 准备 为类变量申请内存,设置默认值,(初始化变量的 ...

  9. FastDfs安装文档

    安装顺序 libfastcommon fdfs_tracker ==> 依赖:Gcc.libevent.perl fdfs_storage FastDFS-nginx-module nginx ...

  10. PHP网络爬虫实践：抓取百度搜索结果，并分析数据结构

    百度的搜索引擎有反爬虫机制,我先直接用guzzle试试水.代码如下: <?php /** * Created by Benjiemin * Date: 2020/3/5 * Time: 14:5 ...