文章目录 一、清除浮动 - 父级元素设置 overflow 样式 二、父级元素设置 overflow 样式代码示例 三、overflow 属性样式效果 1、没有设置 overflow 的效果 2、overflow...: hidden 溢出隐藏效果 3、overflow: auto 垂直进度条效果 4、overflow: scroll 水平垂直进度条效果 一、清除浮动 - 父级元素设置 overflow 样式 ---...- 父级元素设置 overflow 样式 语法 : 选择器 { /* 清除浮动 - 父级元素设置 overflow 样式 */ overflow: hidden; } overflow...样式可设置的属性值 : hidden auto scroll 父级元素设置 overflow 样式 清除浮动 的优缺点 : 优点 : 代码简单 缺点 : 无法显示 溢出 的元素 , 如果 子元素 很多..., 不能自动换行 , 部分子元素会被隐藏 ; 二、父级元素设置 overflow 样式代码示例 ---- 在 没有设置 height 高度 , 并且内部子元素都是 浮动子元素 的 父级容器 中 , 设置
前阵子解决了博客在低版本 IE 下会假死的问题，发现居然是因为我自定义 CSS 的闭合误用了中文大括号导致的！ 解决这个问题之后，又发现了另外一个坑：发现博客在 IE8 及以下版本的响应式不生效。...大概工作原理想想知道，应该就是用 js 的方式，先取得写好的 css3 属性，然后动态改变元素样式，从而解决兼容性问题。...当然，这种方式肯定会比纯 css 效率低得多，IE 下很明显会略显迟钝，大家自行体验。 经过测试发现，鸟哥的博客在 IE8 下的响应式除了略卡一点，并没有出现响应式失效的情况，为啥我博客就不行呢？...-mediaqueries.js 生效，那么含有上述响应式的 css 代码就不能跨域！...[endif]--> 其中 /wp-content/themes/begin/OldIE.css 就是放了主题所有的响应式 CSS 属性，使用了相对路径，不再使用 CDN，且只在 IE9 以下的浏览器生效
2.4 给父级加上空标签子级，并设置子级清除左右浮动 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费（多余的元素）； ie6最小高度19px；解决后ie6下还有... 1.2.1 父元素加浮动，但表现的需要是子元素，此时父元素浮动不生效。 ...调试完成 2、css hack（针对不同浏览器写不同css样式的过程） 2.1 书写css hack 顺序：先写全部都支持的，然后单独处理个别浏览器 ...2.4 给父级加上空标签子级，并设置子级清除左右浮动 --》不符合W3C标准 ，不符合内容、行为、样式三者分离的标准； 标签浪费（多余的元素）； ie6最小高度19px；解决后ie6下还有... 1.2.1 父元素加浮动，但表现的需要是子元素，此时父元素浮动不生效。
4、脱离文档流 5、提升层级 清除浮动： 1.加高 问题：扩展性不好 2.父级浮动 问题：页面中所有元素都加浮动，margin左右自动失效 3.inline-block 清浮动方法： 问题...:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法； position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容） 关于层级问题的一些思考。...需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。...方式一 条件注释法（较为常用） 只在IE下生效 只在IE6下生效 只在IE6以上版本生效 只在IE8上不生效 非IE浏览器生效 <!
，@import 导入的样式需等页面加载完成后再加载； link 没有兼容性问题，@import 不兼容 ie5 以下； link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import...你可以通过给 加上 media 属性来指定该样式文件只能对什么设备生效，不指定的话默认是 all，即对所有设备都生效： <link rel="stylesheet" src="styles.<em>css</em>...而产生 BFC 的方式很多，我们可以给父元素设置overflow: auto 来简单的实现 BFC <em>清除</em><em>浮动</em>，但是为了兼容 <em>IE</em> 最好用 overflow: hidden。...参考：<em>CSS</em>中的<em>浮动</em>和<em>清除</em><em>浮动</em>，梳理一下[16] 消除浏览器默认<em>样式</em> 针对同一个类型的 HTML 标签，不同的浏览器往往有不同的表现，所以在网站制作的时候，开发者通常都是需要将这些浏览器的默认<em>样式</em><em>清除</em>，...针对<em>清除</em>浏览器默认<em>样式</em>这件事，<em>在</em>很早之前 <em>CSS</em> 大师 Eric A. Meyer 就干过。它就是写一堆通用的<em>样式</em>用来重置浏览器默认<em>样式</em>，这些<em>样式</em>通常会放到一个命名为 reset.<em>css</em> 文件中。
清除浮动的方法 , 使用 after 伪元素清除浮动 ; 2、after 伪元素清除浮动简介 在 CSS 样式最上面 , 声明 清除浮动元素样式 , 将选择器设置为 .clearfix:after ,...: /* 低版本浏览器 IE6 / IE7 清除浮动样式 */ .clearfix { *zoom: 1; } 如果需要 清除某个父容器中子元素的浮动样式 , 在该父容器的 class...核心代码示例 : CSS 样式代码 : /* 清除浮动 - 使用 after 伪元素 ( 最流行写法 ) */ .clearfix:after { content: ""; display...: block; height: 0; visibility: hidden; clear: both; } /* 低版本浏览器 IE6 / IE7 清除浮动样式 */.../ IE7 清除浮动样式 */ .clearfix { *zoom: 1; } /* 父容器 1 没有指定高度 , 默认 0 像素 */ .father1 { width
父容器内边距 ; 二、CSS 清除浮动 1、清除浮动 简介 在开发页面时 , 遇到下面的情况 , 父容器 没有设置 内容高度 样式 , 容器中的 子元素 设置了 浮动样式 , 脱离了标准流 , 高度会默认设置为...0 像素 的问题 ; 清除浮动 效果 : 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ; 2、清除浮动 语法 - 额外标签法 清除浮动语法 : CSS...在 CSS 样式最上面 , 声明 清除浮动元素样式 , 将选择器设置为 .clearfix:after , 其中的 :after 是伪元素 , /* 清除浮动元素样式 */ .clearfix...高版本浏览器才支持 , 低版本浏览器不支持该设置 , 为了兼容低版本浏览器 , 需要使用下面的样式 : /* 低版本浏览器 IE6 / IE7 清除浮动样式 */ .clearfix {...; } 低版本浏览器 IE6 / IE7 清除浮动样式 : .clearfix { *zoom: 1; } 声明完上述元素后 , 在需要清除浮动元素的 父容器 中 , 声明 clearfix
换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 6.为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？ 浮动元素碰到包含它的边框或者浮动元素的边框停留。...清除浮动的方式： 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...8.前端项目中为什么要初始化CSS样式？ 因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。...link属于HTML标签，而@import是css提供的； 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载； @import只在IE5以上才能识别，而link是...这是因为，在CSS中，盒子模型可以分成：W3C 标准盒子模型、IE 怪异盒子模型。 默认情况下，盒子模型为W3C 标准盒子模型；标准盒子模型，是浏览器默认的盒子模型。
CSS 语法规范 (1). 继承性，大部分的样式属性是可以被继承的 (2). 层叠性，可以为一个元素定义多个样式规则或样式声明,只要样式声明不冲突时,那么所有的样式声明都可以应用到元素上 (3)....Clear 清除浮动，清除当前元素前面元素浮动所带来的影响，清除浮动影响后，当前元素不会上前占位 语法:clear:value (1). none 默认值，无清除效果 (2). left 清除当前元素前面元素左浮动带来的影响...只在 IE 下生效 这段文字只在 IE 浏览器显示 B. 只在 IE6 下生效 这段文字只在 IE6 浏览器显示<!...只在 IE6 以上版本上生效 这段文字只在 IE6 以上(包括)版本 IE 浏览器上显示 D. 只在 IE8 上不生效 这段文字在非 IE8 浏览器显示 E. 非 IE 浏览器生效 这段文字只在非 IE 浏览器显示 F.
一般新手在使用Css的时候经常会犯一些错误，出现一些不经意的漏洞，如果能从刚开始学习书写Css的时候开始就注重Css使用的一些习惯性的要求，那在以后的项目开发中是很有帮助的。...搜集了一些资料，也有一些自己的体会，一下是常用的一些Css使用Tips： 不确信、则验证。实际效果至上，不管自己认为效果是怎样，只有放在浏览器上验证之后才能保证无误。...若用浮动实现布局，确保正确地清除了浮动。我是不喜欢使用浮动的，脱离常规的流，使用太多浮动的话，很容易导致自己都不知道写出来的样式会怎么呈现了。所以如果使用浮动，一定要确保清除。...避免IE6的“无样式内容瞬间”现象。使用@import语句引入外部样式表，可能会在IE6中出现“无样式内容瞬间”现象，可以通过使用link链接样式表，或者在页面上添加script元素来避免这个问题。...important;}，但由于IE不支持它，所以现在更多的是作为CSS HACK来使用。
:after 在元素之前添加内容,也可以用来做清除浮动。...清除浮动的方式 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。...21、zoom:1的清除浮动原理? 清除浮动，触发hasLayout； Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。...譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。...样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。 只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
示意图： image.png 解释下什么是浮动和它的工作原理？ 什么是浮动？ 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。...2. clear:both 在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。...伪元素清除浮动 上面那种办法固然可以清除浮动，但是我们不想在页面中添加这些没有意义的冗余元素，此时如何清除浮动吗？...触发hasLayout，清除浮动。 zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。...譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。
float浮动为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。...清除浮动的方式：父级div定义height最后一个浮动元素后加空div标签 并添加样式clear:both。包含浮动元素的父标签添加样式overflow为hidden或auto。...原因是不同的浏览器对一些元素有不同的的默认样式，如果你不处理，在不同浏览器下回存在必要的风险，或者更有戏剧性发生。 你可能会用Normalize来代替你的重置样式文件。...最常见的应用是利用伪类清除浮动：CSS Code复制内容到剪贴板//一种常见利用伪类清除浮动的代码 .clearfix:after { content:"....，再利用clear: both清除浮动。
CSS注释 /*这是注释*/ CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。... 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。...： 你会看到之前的background-color有了一个横线，这是不生效的效果，因为你查看的hover的样式 还可以看到class 把对勾去了，这个class...，在父标签里面加一个其他的标签 伪元素清除法 css来解决 overflow:hidden 给塌陷的父级标签设置这个属性就可以清除浮动。 ...： 效果是一样的： 一般业内约定成俗，都把这个清除浮动的class属性命名为clearfix，而不是cc，如果你在别的网页看到了这个clearfix，这个一定是用来清除浮动的。
::after 伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效...； 继承的 CSS 样式不如后来指定的 CSS 样式； 在同一组属性设置中标有!...(5)用after伪元素清除浮动 给外部盒子的after伪元素设置clear属性，再隐藏它 这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。...这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决CSS盒子塌陷。 备注：第五种方法虽好，但是低版本IE不兼容，具体选择哪种解决方法，可根据实际情况决定。...，如何清除浮动？
[28] 29.请解释一下为什么需要清除浮动？清除浮动的方式[29] 30.使用 clear 属性清除浮动的原理？[30] 31.zoom:1 的清除浮动原理?...31.zoom:1 的清除浮动原理清除浮动，触发hasLayout； zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。...譬如外边距（margin） 的重叠，浮动清除，触发ie的haslayout属性等。...样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直 到和规则匹配，或者是因为不匹配而放弃该规则。...: #39简单说一下-css3-的-all-属性 [40] 40.为什么不建议使用通配符初始化 css 样式。
正确的伪类样式的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} (6) 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法...这时我们要避免这种情况发生，就需要清除浮动, 就算子元素浮动了，其父元素也不出现高度塌陷 现象。 清除浮动的方式： 父级元素定义height。 但这样定死的高度，往往不是我们想要的。...父级结尾处添加一个空div,设置css样式clear:both。 原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。...原理：元素生成伪元素的作用和效果相当于方法2中的原理，（使用伪元素生成一个看不见的块级元素，并且设置clear:both样式）但是IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决...ie6,ie7浮动问题 父级div添加css属性：overflow:hidden (7) position 、float 和 display 的取值和各自的意思和用法 position 属性取值
原文:clearfix Reloaded + overflow:hidden Demystified clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了...is wrong 中，他介绍了这种方法在跨浏览器兼容时会造成的问题，并建议仅对不邻近浮动元素的元素应用clearfix（例如弹出窗口），尽管这样做我们还需要处理由clearfix造成的边距折叠bug（译者注...overflow 在众多关于清除浮动的讨论中，出现了overflow:hidden的方法，并且这种方法总是被“如果你把绝对定位元素置于div内部，这些元素（超出的部分）将会被隐藏”的观点击败。...更好的选择 如果你可以对包含浮动的元素应用宽度，那么更好的办法是用下面的样式来清除浮动： selector { display: inline-block; width: ; } 引申阅读...他负责的项目有 TJK Design 和 ez-css.org. 你可以在twitter上follow他： @thierrykoblentz *.
清除浮动（clearfix hack） 在使用浮动的时候经常会遇到一个古怪的事情： img { float: right; } 不......这个图片比包含它的元素还高， 而且它是浮动的...有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）....让我们加入一些新的CSS样式： .clearfix { overflow: auto; } 现在再看看发生了什么： 好多了！...这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式： .clearfix { overflow: auto; zoom: 1; } 有些独特的浏览器需要“额外的关照”。...清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。
领取专属 10元无门槛券
手把手带您无忧上云
