clearfix

Why overflow:hidden expands parent element (containing floated child elements)?

由 这一生的挚爱 提交于 2019-12-03 07:40:24
In short: Basically, I just want to know why overfow:hidden explands the container containing a floated item. Shouldnt it hide the overflowing element like in this image http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png why does it do this instead http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png Long version: Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in relation to other block elements. And inline elements wrap around the floated elements to acknowledge

“Best clearfix ever?”

由 谁说胖子不能爱 提交于 2019-12-03 05:01:42
I saw this rather different method for clearfix here: http://www.marcwatts.com.au/blog/best-clearfix-ever/ It proposes adding the following CSS code which automates clearfix and does not require you to add a 'clearfix' or similar class to the elements you want to clear. /* our Global CSS file */ article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } footer:after { clear:both; content:"."; display

Less CSS Extend and media queries

由 匿名 (未验证) 提交于 2019-12-03 01:23:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I have a few Less utilities that I've used as extends - here's a typical scenario. . clearfix { &: before , &: after { content : "" ; display : table ; } &: after { clear : both ; } } However, I now find myself using media queries and the extend doesn't, well, extend, to all these scenarios. What I would like to do is to declare the code once and reuse it. I came up with this pattern which works and allows me to use the utility inside media queries, or wherever it suits. The question is I am doing it wrong, and the extend should

distinguishing html with css sectors

由 匿名 (未验证) 提交于 2019-12-03 01:09:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I would like to restyle the nav id="jive-breadcrumb" with CSS. I want to have a different style when div class="jive-alert-type jive-alert-announcement" is present and when div class="jive-alert-type jive-alert-announcement" is not present. I've gotten this for with the css sectors: section #j-main div#jive-body nav#jive-breadcrumb ul { } My second css selector section #j-main :not(???) div#jive-body nav#jive-breadcrumb ul { } How do I write the selector to be different? Here is the section of css with <section> <span> <script> ...

清除浮动的方法

由 匿名 (未验证) 提交于 2019-12-02 20:37:20
最早的一种方式，支持 IE6 <style> .box { background-color: gray; border: solid 1px black; } .box .img { float: left; width: 100px; height: 100px; } .clearfix { *zoom: 1; } .clearfix:after { content: "020"; display: block; height: 0; clear: both; visibility: hidden; } </style> <div class="box clearfix"> <div class="img"></div> </div> 添加无用标签，不易维护。 <style> .box { background-color: gray; border: solid 1px black; } .box .img { float: left; width: 100px; height: 100px; } .clear { clear: both; } </style> <div class="box clearfix"> <div class="img"></div> <div class="clear"></div> </div> 现在最流行的一种方式

CSS样式的浮动的解决方法

由 柔情痞子 提交于 2019-12-02 19:04:17
css样式浮动的解决方法 1.增加一个空样式的div .clearfix{ clear: both; } </style> <body> <div class="box1">div1</div> <div class="box2">div2</div> <div class="clearfix"></div> <div class="box3">div3</div> </body> 2.设置外部div的overflow属性为auto或者hidden <style> .box{ background-color: yellow; overflow:atuo; //或者是hidden } .box1{ width: 100px; height: 100px; background-color: green; } .box2{ width: 100px; height: 100px; background-color: red; } </style> <body> <div class="box"> <div class="box1">div1</div> <div class="box2">div2</div> </div> </body> 3.利用伪类元素来清除有浮动 <style> .clearfix:after{ content:""; display:table; height

html--伪等高布局

由 随声附和 提交于 2019-12-02 14:33:01
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>伪等高布局</title> <style type="text/css"> *{ margin:0; padding:0; } #wrap{ width:750px; border: 1px solid; margin: 0 auto; overflow: hidden; } #wrap .left{ float: left; width: 200px; background: pink; padding-bottom: 1000px; margin-bottom:-1000px; } #wrap .right{ float: left; width: 500px; background: deeppink; padding-bottom: 1000px; margin-bottom:-1000px; } clearfix{ *zoom: 1; } clearfix:after{ content:""; display: block; clear:both; } </style> </head> <body> <div id="wrap" class="clearfix"> <div class="left"> 无限高度 <br /> left <br />

[笔记]使用clearfix清除浮动

由 孤者浪人 提交于 2019-12-02 12:16:52
转载自 奶牛博客 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } 　　 在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹，可以保证外部div的height，即清除"浮动元素脱离了文档流，包围图片和文本的 div 不占据空间"的问题。 看到”闲聊CSS之关于clearfix–清除浮动“ （http://www.indievox.com/e2ghost/post/50238）的文章给了一个比较清晰的分析： 构成Block Formatting Context的方法有下面几种： float的值不为none。 overflow的值不为visible。 display的值为table-cell, table-caption, inline-block中的任何一个。 position的值不为relative和static。 很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。 因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow:

CSS布局

由 帅比萌擦擦* 提交于 2019-11-30 22:13:25
给子元素加float:left;给父元素的class加上clearfix。 但是要给父元素清除高度塌陷 代码如下： .clearfix:befor, .clearfix:after{ content:’’; display:block; } .clearfix{ clear:both; } CSS左中右布局 float+absolute方式： <style type=”text/css”> #content{ position: relative; width:100%; height:300px; } .left{ float: left; width: 200px; height:100%; background-color: #00a0dc; } .middle{ position: absolute; top:0; bottom:0; left:200px; right: 300px; background-color: red; } .right{ float: right; height:100%; width: 300px; background-color: #00a0dc; } </style> float+margin方式： <style type=”text/css”> #content{ height:300px; } .left{ width: 200px

Sass / SCSS Mixin for Clearfix - best approach?

由 ◇◆丶佛笑我妖孽 提交于 2019-11-30 03:55:53
I want to remove the clearfix class from my HTML and include a clearfix mixin in my SCSS (Rails 3.1 application). What is the best approach to this? I am thinking of just taking the HTML 5 Boilerplate clearfix and turning it into a mixin, then @including it within the CSS for elements that need clearfixing. Copied from HTML5 Boilerplate: /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } /* Fix
订阅 clearfix