css中：overflow:hidden清除浮动的原理
要想彻底清除浮动的影响，适合的属性不是 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清除浮动的原理的更多相关文章
- CSS 的overflow:hidden (清除浮动)
verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- css 中 overflow: hidden清楚浮动的真正原因
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- 转：css中overflow:hidden 不起作用了吗？
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- overflow:hidden清除浮动原理解析及清除浮动常用方法总结
最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...
- overflow:hidden清除浮动原理
overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.
- 关于css中overflow:hidden的使用
overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容: 但是,小编在以往的使用中,发现了一个问题,只要父级容 ...
- CSS中overflow:hidden
CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...
- CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
随机推荐
- getHibernateTemplate()的find用法大全
一.find(String queryString); 示例:this.getHibernateTemplate().find("from bean.User"); 返回所有Use ...
- [LC] 318. Maximum Product of Word Lengths
Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...
- take office|boast|think twice|dispose of|level|stuff|'s mature for|a green hand|'s a slave to|
One reporter wrote that Dewey was acting like a man who had already been elected and was only passin ...
- pressure to compete|listen to sb do|have sb do|felt like|shouldn't have done|spring up|in honour of|not more than|much as|
The pressure to compete causes Americans to be energetic, but it also puts then under a constant emo ...
- 关于前端使用JavaScript无法实现canvas打印问题的解决
当使用浏览器的打印功能window.print()无法打印网页上的canvas图像,但是可以通过转换canvas成一个图片的形式来实现canvas的打印. 解决方法 getElementById获取c ...
- HDU1233 还是畅通工程
题目: Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连 ...
- PyTorch模型加载与保存的最佳实践
一般来说PyTorch有两种保存和读取模型参数的方法.但这篇文章我记录了一种最佳实践,可以在加载模型时避免掉一些问题. 第一种方案是保存整个模型: 1 torch.save(model_object, ...
- Nginx笔记总结九:Nginx日志配置
ngx_http_log_module用来定义请求日志格式1. access_log指令 语法: access_log path [format [buffer=size [flush=time] ...
- 古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子总数为多少？（python语言）
# 古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? # 斐波那契数列:0,1,1,2,3,5,8,13, ...
- GYOJ_1812_股票（stock）
题目描述 2130年,股神巴菲特投胎了!他投胎到你身上! 你作为股神转世,能力比原股神还要强,你可以预测到今后n天的股价.假设刚开始你的手上有1元钱,你想知道n天后你最多可以赚到多少钱.作为股神转世, ...