clearfix

浮动与定位

由 雨燕双飞 提交于 2019-11-29 16:54:49
整理下关于文档流，浮动，定位及造成的影响文档流的知识点 一 文档流的概念指什么？ 　　文档流，是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。 　　标准流的特点：1.块级元素从上到下，独占一行 　　　　　　　　　2.行内元素，行内块级元素从左到右在一行中显示。 　　　　　　　　　3.占位置。 　　使元素脱离文档流的方法有：浮动和定位。 二 CSS定位 position CSS定位方式有四种：默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed） static: 默认值。没有定位，元素在正常的文档流中，top，right，bottom，left和z-index属性无效。 　 relative: 生成相对定位的元素，通过top，bottom，left，right的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。 　　注意：1.元素偏移之后，他本来默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位； 　　　　　2.该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性改变层叠情况。 第二个盒子元素相对于之前的位置向下平移了20px

（原生JS） 图片无缝滚动、图片转化、轮播图、折叠效果

由 久未见 提交于 2019-11-29 03:28:58
1.图片无缝滚动（原生JS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> *{box-sizing:border-box;} body{margin: 0 auto;} ul{margin:0;padding:0;} li{list-style: none; width: 250px;height: 300px; float: left;} .clearfix:before,.clearfix:after{display:table;content:"";} .clearfix:after{clear:both;} .clearfix{*zoom:1} .hide{width: 250px;height: 300px; overflow: hidden; margin: 50px auto;} .hide ul{position: relative;} </style> </head> <body> <div class="hide"> <ul class="clearfix"> <li><img src="img/1.png" width="250" height="300"></li> <li><img src

清除浮动的方法（float）

由 被刻印的时光 ゝ 提交于 2019-11-28 23:56:24
方式一： 额外标签法：给浮动的元素后面新增加一个清除浮动的盒子 例如： <div style="float: left">浮动盒子</div> <div style="float: left">浮动盒子</div> <div style="clear: both">清除浮动盒子</div> <!--新增清除浮动的标签--> 方式二： 给父元素添加overflow属性方法，给父级添加 overflow 为 hidden|auto|scroll都可以实现 例如： <div style="overflow: hidden"> <div style="float: left">浮动盒子</div> <div style="float: left">浮动盒子</div> </div> 方式三： 使用 after 伪元素清除浮动，:after 方式为空元素的升级版，好处是不用单独添加标签 缺点：:after不支持IE6、7，可以使用zoom：1; 例如: .clearfix:after{ content:""; display:block; clear:both; } .clearfix{ *zoom:1; /* IE6、7专用清除浮动方法 */ } <div class="clearfix"> <div style="float: left">浮动盒子</div> <div style=

Understanding Bootstrap's clearfix class

由 北城余情 提交于 2019-11-27 19:13:26
.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; } &:after { clear: both; } } Why not use display:block ? In addition, why does it also apply to the ::before pseudoclass? .clearfix is defined in less/mixins.less . Right above its definition is a comment with a link to this article: A new micro clearfix hack The article explains how it all works. UPDATE: Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn't

ClearFix vs Overflow [duplicate]

由 依然范特西╮ 提交于 2019-11-27 07:05:31
This question already has an answer here: What methods of ‘clearfix’ can I use? 29 answers Its the standard float issue. You have a bunch of floating elements inside a parent container div. Since the childs are floating, the parent doesnt expand to include all of them. I know about the clearfix solution as well as setting the overflow property on the parent container div to "auto" or "hidden". http://www.quirksmode.org/css/clearing.html To me setting the overflow method seems much nicer as its just one property. What I want to understand is when does the clearfix approach has advantage over

Understanding Bootstrap's clearfix class

由 一个人想着一个人 提交于 2019-11-27 04:21:35
问题 .clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; } &:after { clear: both; } } Why not use display:block ? In addition, why does it also apply to the ::before pseudoclass? 回答1: .clearfix is defined in less/mixins.less. Right above its definition is a comment with a link to this article: A new micro clearfix hack The article explains how it all works.

What does the clearfix class do in css? [duplicate]

由 丶灬走出姿态 提交于 2019-11-27 02:34:52
This question already has an answer here: What is a clearfix? 10 answers I've seen div tags use a clearfix class when it's child divs use the float property. The clearfix class looks like this: .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; } I found that if I don't use clearfix when I use the bottom-border property, the border would show above the child divs . Can someone explain what the clearfix class does? Also, why are there two display properties? That seems very strange to me.

ClearFix vs Overflow [duplicate]

由 守給你的承諾、 提交于 2019-11-26 13:02:41
问题 This question already has answers here : What methods of ‘clearfix’ can I use? (29 answers) Closed 3 years ago . Its the standard float issue. You have a bunch of floating elements inside a parent container div. Since the childs are floating, the parent doesnt expand to include all of them. I know about the clearfix solution as well as setting the overflow property on the parent container div to \"auto\" or \"hidden\".http://www.quirksmode.org/css/clearing.html To me setting the overflow

用before 和after 清除浮动

由 旧巷老猫 提交于 2019-11-26 12:23:21
1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>清除浮动</title> 8 <style> 9 /* 清楚浮动方法 10 (1) :额外标签法 11 (2) :父级添加overflow 属性 12 通过BFC 的方式,可以实现清楚浮动的效果 13 可以给父级添加:overflow 为hideden | auto |scroll 14 (3) :使用after 伪元素 15 (4) :使用before 和after 双伪元素 16 --->额外标签法 17 通过 浮动元素末尾添加一个字的标签: 例如:<div style="clear:both"> </div> 18 19 */ 20 21 .box1 { 22 width: 400px; 23 background: green; 24 /* 触发BFC ,如果内容自动清楚会导致隐藏效果 */ 25 /* overflow: hidden; */ 26 } 27 /*.clearfix:after

What does the clearfix class do in css? [duplicate]

由 只愿长相守 提交于 2019-11-26 10:06:54
问题 This question already has answers here : What is a clearfix? (10 answers) Closed 5 years ago . I\'ve seen div tags use a clearfix class when it\'s child divs use the float property. The clearfix class looks like this: .clearfix:after { clear: both; content: \".\"; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; } I found that if I don\'t use clearfix when I use the bottom-border property, the border would show above the child
订阅 clearfix