84.尚硅谷_HTML&CSS基础_完善clearfix.avi原创

来呢，我们再说一个关于表格的啊，其实也不算是关于表格的，就是一个表格的一个其他的一个作用啊，我们来说一个零五，我们来什么呢？完善我们这个什么呀，哎，Fix还记得我们这fix吗。哎，是不是就是清除浮动解决我们这个高度太阳问题那个对吧？诶那这里边我们先说一个问题啊，来我这来一个div，点一个BOX1，然后div里边再来一个点一个BOX2，还BOX1BOX2 box1是负元素，BOX2是左元素对吧？点一个BOX1，我们来一个YY一个这个300个像素hat也来个300个像素background color，我们来一个这个井号BA保存，然后我这复制一个，这来谁呢？来一个BOX2，宽度是200，高度是200，然后这来一个掰开着我们来一个这个yellow吧，黄色的保存，看出运行现在是不是两个盒子呀，这是呃，这个是我BOX1，这是我们box啊二他们是父子关系，那接下来我们来一什么呢？我给BOX2我设置一个marin泡泡，我来一个100个像素，诶，我希望BOX22呢，往下挪一点啊，往下挪一点，但是注意了，我这么写会有什么问题是下。

看见了，哎，我们这个外边距的一个什么呀？重叠吧，诶重叠垂直外边的一个重叠，诶那我们会再说一下这个问题啊，我们叫什么呀？相邻的子元素和我们这个负元素相邻的什么呢？诶垂直外边距哎会发生什么呀？诶重叠也就说什么呀，子元素的恶元菌会什么呢？会传递给谁呀？哎，负元素啊，会传递给我们这个负元素，诶那我们现在说我们想解决问题怎么办呀？嗯，解决的思路就是什么呀，你要不然你就别用什么呀，别用外边距对吧？要不然你就别让他们俩相邻对吧？这两个东西任选其一啊任选其一，那么说了，我们现在就说我不考虑不用外边距，不用外边距可以干嘛呀，我可以给复元素设置一个这个拍丁pading套吧，哎，给复元素增加pading，然后把增加那个pading从那个高度里给它减去是不行啊，哎，减去就行，那现在我不采用这种手段，我现在想干嘛呢。

啊，我想采用第二种叫什么呀，我让他这个外边距干嘛呀。不相邻，那我怎么让它不相邻诶，我可以给复元素加一个PA丁泡泡，随便写一个，一个像素保存，一刷新是不是就隔开了呀？哎，隔开以后当然又带来新问题了，复元素高度是不是增加了一个呀，你得干嘛呀，把你那个剪去挺麻烦的，或者干嘛呀，加一个包的是也行啊，但是实际上效果都是什么呀，一样都会影响我们这个可见宽的一个什么呀高度，诶那现在我希望什么呢？我希望它。既不影响我们整个可见宽的高度，又可以干嘛呢？又可以阻止这个外边距的一个重叠，那怎么办呢？那我这一想是不是无非就让这个div它们之间那个外边距给它隔开呀，那这样我在这写什么呢？写个A保存是不是行啊？诶来一刷新是不是也隔开了呀，但是问题还是一样的，是不是还是增加内容呀？哎，那我一想这样吧，我来一什么呢？来一个div div里写一个A，我一保存这效果是不是一样啊？诶效果是一样的啊，我一刷新，那我一想这样行，那我干脆干嘛呢？我来个空的div行不行？诶咱们来试试啊，来试试这一刷新走你。

没用一样是吧，诶这玩意儿一点用也没有，所以空的div能不能隔离我们这个附子元素的这个外边菌不能啊，所以注意框的div是不能隔开这个附子元素这个相邻的这个微距的，那div不行，我们刚才说了，我的这个table是不是也是一个快元素啊，那我一想我来一个空的什么呀，Table它行不行呢？行不行呢？我们来试试，我们来试试，一刷新走你。

是不是可以啊，诶，你会发现我使用一个空的table可以将我们这个负元素和子元素外外边距隔开，怎么看就隔开了这个外边距是不是没有传递啊，哎，没有传递，并且它有没有影响到我们整个可见框的一个大小，没有啊，没有，所以这里边我们来说一下使用什么呢？使用我们这空的这个table标签可以什么呢？可以隔离我们这个附子元素的一个外边距干嘛呢？诶阻止我们这个外边距的一个什么呀，重叠啊，阻止外边距的一个重叠，我们会发现这东西是不是还还挺好用的呀，还挺好用的，所以你要想阻止重叠干嘛呢？你在负元素和子元素之间加一个什么呀，加一个这个table，它们之间是不是就给它隔开了呀？哎，隔开了，但是加了一个table。又有问题了，加了一个table以后，我们发现这个结构是不是又增加了没有用的部分啊，哎，我不希望边添加这种没有用的结构，但是呢，我还想阻止这个外边去重叠，那怎么办呢？现在我这一刷新走你是不是不行啊，诶那怎么办呀，我现在是不是想在我这个副标签的最前边添加一个。

Table啊，我想在负元素的最前边添加一个table，那问题来了，诶，我能不能通过CSS手段选中负元素最前边，诶怎么选点一个BOX1，我们冒号一个什么呀？是不是before啊？哎，我们这个尾类是不是选中我们这个最前面那部分呀，然后整出来来一个content，是不是添加一个空的内容啊？诶，那问题来了，我不是光添加一个内容，我希望我添加一个内容是一个什么呀？是个table吧，但是我这如果来block行不行了，Block有用吗？没用，Block是不是跟div一样啊？我希望添加那个东西不仅是个块元素，它要是个什么呀？是不是要是个表格啊？那问题就来了，Display，我能不能把一个元素设置成表格呢？来咱们看看。

W3死故离线手册HTMLCSS往下找CS参考手册直接搜一个第3PLAY在这儿呢，规定元素应该生成的夸的类型，点开它我们来看，诶咱们看block阴暗阴暗block往下找找，诶有个什么呀，Table，也就是说此元素会作为块及表格来显示，类似table吧，诶类似table，所以我这一想，那我就别block了，哎，什么呀table，那是不是就变成一表格了呀哎所以我们来说一下啊叫做一个第play诶table诶可以将一个这个什么呀元素设置，为什么呢？设置为这个哎表格显示啊所谓表格显示，但是我们说了，我虽然将笔before这个位置设置一个表格，但是它是一个什么呀？空表格吧哎，不会占用任何的空间，但是它却可以干嘛呢？走你干嘛了，是不是可以隔开我们负元素子元素，它这个外边距了。

诶，并且不会对我们的这个什么呀，诶可见夸是不是产生任何影响啊，诶所以这个是我们解决这个问题的什么呀，最完美的一个方案了啊，最完美的一个方案了，诶那好了，写到这我们想起一什么东西来，诶之前我们还写过这么一个东西，Div点一个BOX3，然后我这来一个div，点一个BOX4 box3设置一个样式，点一个BOX3，我们不设置宽高，直接来一个什么呀，Boer来一个什么呀，十个像素，然后来一个这个red，然后来一个solid，这点一个BOX4，设置一个white 100个像素，Hi也来一个100个像素background color，我们来一个这个yellow主任保存，现在一刷新走，你是不是这么一个呀，那么说了，当我让四一浮动。

Float来一个right left向左浮动，我一刷新拖流动零将不能撑起负元素的高度，导致负元素高度塌陷，导致我们页面整体的布局是不是混乱起来了，哎，混乱起来，那我们说了解决高度塌陷问题怎么解决的？哎，是不是after德本类啊，我这来一个clear fix，诶我这来一什么呀，点一个clear clear fix冒号一个after after来一什么呀，Content空的this play来一个lo，再来一个我们这个clear来一个boss保存是不是行了呀，再来看一刷新走，你是不是完美解决这个高度培养问题啊好，那我们发现现在我有这么两个代码来粘过来啊，这个是干嘛的呢？是解决我们这个父子元素的这个外边距重叠，诶外边距重叠这个呢，诶是。

解决我们这个复元素高度塌陷吧，哎，解决我们这个复元素高度塌陷，那么一想，现在我有两段代码，这两段代码我们看着还有点有点像是吧？除了哪啊这多了一个可bos，然后呢，这这一个什么呀，这display是table，而我这是什么呀？Block，诶block，那我们想那这改成block肯定不行，对吧，刚才我们试了改成block它干嘛呀，是不是还会重叠呀，哎，还会重叠改成block就不行了，但是我这能不能改成table啊，我们说了table是不是也是快元素啊，是快元素它也是一个block，所以它是不是也能去解决我们这个高度胎价问题啊来我这一保存，现在一刷新走，你是不是一样好用啊，诶一样好用，所以在我们高度塌陷，这实际上这写的是block还是table，实际上是什么呀？是无所谓的吧，哎，是无所谓的，他这样改完了，你会发现这两个是不是差不多了呀，那我这一想，我这个before，我给他加一个可fix，它会不会有影响。

我这一刷新是不是没有影响啊，我一发现这两个样式是不是就是一样的呀？诶那我这一想，我这clear fix，我能不能给它改一下，我先给它改回来啊，要们改回原来那样的block，诶能不能给它改一下呢？来我就住了，我就不这么写了，直接来写一个什么，哎，注释嵌套。这个呢，给它分别的注释一下啊，但是注释完了就很恶心，注释一下，然后看我改一下啊怎么改，点一个clear fix，先来一个冒号比before，这是选中什么呀？是不是前面那部分呀，再来一个点一个clear fix来一个冒号after，那这表示什么意思？是不是我同时选中前边还有什么呀，后边啊，哎，同时选中，然后来什么呢？Content来一个空，这表示什么？我是不是在这块加一个空白的内容啊，然后再来一个display，来一个什么呀？Table是不是设置为它显示的是一个表格啊，再来一个clear，哎，Both是不是就OK了呀？那这样什么效果？是不是这个clear fix既可以解决我们高度塌陷，又可以解决我们这个附子元素的外边距重叠呀？诶来保存，我们来看效果，一刷新走你的是不是一样的呀，但是发现什么了，这这不管用了，为啥呀。

为啥不管用了呀，哎，我是不是没有给它加clear fix啊，哎，所以管用的话，把clear fix给它加上，一刷新走，你是不是就OK了呀，哎，就OK了啊，所以这个是我们clear clear fix的最终的写法，我们说什么呢？经过我们这个修改后的这个clear fix它是一什么呀？是一个这个多功能的，其实就俩功能是吧，哎多功能两功能呢，既可以解决我们这个，哎高度塌陷又。

诶可以确保我们什么呢？我们这个负元素和这个子元素的这个垂直外边距不会什么呀，不会重叠啊，不会重叠，我们说了这也是我们这么一个多功能的clear fix以后，也就是说你有了它以后，你想解决高度碳液，你直接给复元素加一个什么呀，Clear fix，你想解决我们这个外边径重叠，你也干嘛呀，你也给它加一个什么呀，Clear fix可以解决同时解决这两个问题啊两个问题好，那这个呢，才是我们一个最终的一个版本的一个clear fix啊clear fix，如果你还要兼容I6，再来什么呀，Clear fix，诶再来一个zoo母一，哎就OK了啊，再来个字母一就OK了。好，那这个呢，是我们说的这么一个clear fix一个最终的一个版本啊，我们来停一下。