clearfix

将清除浮动代码添加到重置样式表中，随时可以调用 1 .clearfix{margin-right:auto;margin-left:auto;*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both} 给需要清除浮动影响的元素添加class名 --- clearfix 例： 1 <!-- css --> 2 <style> 3 .top { 4 width: 100%; 5 height: 200px; 6 background-color: yellow; 7 } 8 .middle .content { 9 float: left; 10 margin-top: 20px; 11 width: 100px; 12 height: 400px; 13 background-color: blue; 14 } 15 .clearfix {margin-right:auto;margin-left:auto;*zoom:1} 16 .clearfix:before,.clearfix:after {display:table;content:"";line-height:0} 17 .clearfix:after{clear

一、浮动的概念 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 二、浮动的影响 1. 浮动会导致父元素高度坍塌 父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素的高度为0，这也就导致了父元素高度塌陷问题。 浮动脱离文档流，这个问题会对整个页面布局带来很大影响，如何解决高度坍塌问题，我们需要清除浮动。 三、浮动的清除 1. clear属性的空标签 在浮动元素后添加一个空标签 <div class="clear"></div> ，并且在CSS中设置 .clear{clear:both;} ，即可清理浮动。 原理：添加一个空标签，利用CSS提高的clear:both清除浮动，让父元素可以自动获取到高度 优点：简单，代码少，兼容所有浏览器 缺点：增加页面的标签，造成结构的混乱 建议：不推荐使用，此方法已经过时 2. :after伪元素 给浮动元素的容器添加一个 clearfix 的class，然后给这个class添加一个 :after 伪元素实现元素之后添加一个看不见的块元素（Block element）清理浮动。 原理：通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ，并且设置clear属性清除浮动。 优点

/* 清除浮动塌陷问题 */ .clearfix:after { clear: both; } .clearfix:after, .clearfix:before { content: " "; display: table; } /* 清除浮动塌陷问题 */ .clearfix:after { clear: both; } .clearfix:after, .clearfix:before { content: " "; display: table; } 　　 来源： https://www.cnblogs.com/zqy6666/p/11966756.html

vue-tab-demo App.vue < template > < div id = "app" > < Tab /> </ div > </ template > < script > import Tab from './components/Tab' export default { name: 'App' , components: { Tab } } </ script > < style > ul , li { list-style : none ; } .clearfix { zoom : 1 ; } .clearfix :after { display : block ; content : '' ; clear : both ; } </ style > 先布局，写好样式 Tab.vue < template > < div id = "tab" > < div class = "tab-bar clearfix" > < a href = "javascript:;" > HTML </ a > < a href = "javascript:;" > CSS </ a > < a href = "javascript:;" > JavaScript </ a > < a href = "javascript:;" class = "active" > Vue

摘自： https://blog.csdn.net/weixin_41041379/article/details/81871980 一、浮动概念 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 二、浮动的影响 1. 浮动会导致父元素高度坍塌 父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素的高度为0，这也就导致了父元素高度塌陷问题。 浮动脱离文档流，这个问题会对整个页面布局带来很大影响，如何解决高度坍塌问题，我们需要清除浮动。 三、浮动的清除 1. clear属性的空标签 在浮动元素后添加一个空标签，并且在CSS中设置即可清理浮动。 <div class="clear"></div> .clear{clear:both;} 原理：添加一个空标签，利用CSS提高的clear:both清除浮动，让父元素可以自动获取到高度 优点：简单，代码少，兼容所有浏览器 缺点：增加页面的标签，造成结构的混乱 建议：不推荐使用，此方法已经过时 2. :after伪元素 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素（Block element）清理浮动。 原理

　　var slides = $("#frame").find(".phone-screen:nth-child(2n)"); 　　 //每两个为一组包裹起来 var slides2n = slides.each(function(i){ slides.slice(i*2,i*2+2).wrapAll("<div class='ipad-screen swiper-slide clearfix'></div>"); }); //剩下的再用div包起来 slides.slice(slides2n.length * 2).wrapAll("<div class='ipad-screen swiper-slide clearfix'></div>"); 来源： https://www.cnblogs.com/alberGeng/p/11953747.html

问题box-sizing 触发 结构 <div class="wrapper"> <!-- 头部--> <header class="clearfix"> <h2 class="fl">家电</h2> <span class="nav fr"> <a href="">热门</a> <a href="">电视影音</a> </span> </header> <!-- 内容list--> <article class="list"> <ul class=" clearfix c"> <li class="fl pic"> <section><a href="#"><img src="../img/livelectrion1.webp" alt=""></a></section> <section><a href="#"><img src="../img/livelectrion2.webp" alt=""></a></section> </li> </ul> <ul> <li class="fr"> <section> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </section> <section> <li