15.尚硅谷_css2.1_BFC实现两列布局.wmv原创

嗯。好，刚刚我们讲了BFC的一个规则吧，是不是？呃，讲B配之前还讲了一个叫什么CSS的一个步骤吧，把那个布局的套路自己整理一下，OK，我们来看好将BFC之后我们要稍微写点东西了，那刚刚已经说了FC是什么是不是？我们来看一下BFC的五条规则，以及什么时候能出现BFC，那这两个东西是比较重要的，那其他的话就是一些BFC是什么，现在问你BFC是什么，你应该有一个大致的概念了，它是用来干嘛的，懂吗？好，来看一下BFC的第一条规则，不用验证了吧。内部的box会在垂直方向一个方一个接着一个，方式就是快结束，独占一行，是不是？再来看第二规则BFC区域不会与浮动的box相重叠，好用这个规则，其实我们能做一个我们比较经典的布局，叫两列布局，好听一下，两列布局的需求是什么？左边固定，右边知识页。能不能用三列局来实现，干掉一列是不是就可以了，可是我们整个三列布局的时间是不是比较复杂的，来看一下，一般要考你两列布局的时候，你要怎么写啊，来看一下。

好，我们来看一下两列布局，我来布置一个CTRLCCTRLL02，好，这几天都在跟布局打交道，两列两列布局好，看一下两列布局怎么写？好，我把上面的东西全部干掉，就留一个，就留一个什么。好，这边也给他干掉。啊，全部干掉吧。好，来一个div。好，给个ID，这个叫left，好，我们来一个left ctrl c ctrl，再来一个ID叫。Right，好，这里边也给个东西，叫做现在我要实现什么两列布局了，两列布局长长什么呀，这一个固定这个支是100是吧，那怎么办？上来给这个LA干嘛？上来给这个LA来一个呃，宽度板，因为它的固定码是不是给个200PX好再来个什么。

再来一个，嗯，统一我们把它的高度给给了吧，Div的高度统一给掉，Div的高度我们统一给成。也给200吧，200PX，好，Left我给个背景吧，背景为粉色，好，这边我来个right，也来一个，它是不是支持应答white需要指定吗？不需要，直接给他来个背景为deep并好这个你看一下。呃，现在不在移动端这个面标签就不用加了，好这里。好，现在是不是长成这样的，现在是不是要让他们去一行怎么办，哪个浮动起来。上面那个浮动还是下面那个浮动，下面还是上面的，下面的浮动的话，上面不是还是快捷元素吗？它能上去吗？上不去吧，你是不是得让上面的浮动啊，上面的浮动下面是不是可以正好干嘛顶进去啊好那怎么办？

让他干嘛特是吧，好来看一下，OK来看一下，似乎这个两列布局好像已经做完了。那右边是不是这是一的，是不是还缺一个什么，我们说给它来个什么最小的宽度，我们来个600PX是不是啊好刷一下，好这个时候是不是出来了，是不是这个布局是不是好像做完了。想想其实有没有做完。来看一下，我们来看看东西。好，比如说我把这个乘。我把这个层给它O制成，有没有学过O？

把它的透明度制成零，你看这个层底下有没有我外头的东西啊？这是一个干净的两列布局吗？我们的两列布局应该找什么呀？这是一个列，这是。另外一个点你想想啊，这个区域，现在这个区域要不要去放我的一个背景啊。要吧，那这个时候是不是有部分背景会被这个什么left给遮住的，而且其次只要是你两个元素叠在一块了，这个时候如果你想让这个right跟这个跟这个那个跟什么，跟这个左边这个区域，如果有想有点有点间隙，你用Penny还行吗？还可以吗？你这个判定是不是从这边开始算起的，能明白吗？是不是处理它们两的位置是不会比较复杂，说一般我们的两列不及应该应该做什么呀，干干净净的，那么你在你的区域，我在。我的区域能明白吗？这个时候怎么办好来看一下。

如果我让这个overflow。好，有没有发现一件神神奇的事情，看这个区域还会填充这个。Left吗？不会了吧，为什么？来看一下PFC的第二个规则，什么BFC的区域不会与浮动的盒子相重叠，也就是说现在我的left是不是一个浮动的盒子啊？如果我想让right跟left没有什么重叠怎么办？我是不是给right去开启个BFC啊？让它处于一个BFC的环境是不是就可以了？就我让right怎么让right开启开启PC啊，看里面有一个o flow，只要你不是的就能开启。BFC问你现在这个有没有开启个BFC。有没有，是不是开启这个BFC了，这个BFC区域能跟这个浮动区域相重叠吗？不能，这是浏览器的规则，能明白吗？可是我问你这个right是不是BFC的管理。

这个元素有没有受BFC的管理啊？有吧，是谁开启的BFC的管理啊，是自己开启的吗？问你现在现在你在页面上你看到了几个BFC。一个跟标间开启了C，其次right开启了一个BFC，我问你right这个元素是哪一个BFC的管理根元素开启了BFC的管理吗？Right开启这个BFC管谁啊？管你right的子元素，他管right这个元素吗？不管能不能理解，OK，这个得什么得清楚一点，那这是我们最干净的一个两条布局，懂不懂以后写两条布局，不要用三点布件套形式，再砍掉一点懂不懂，能不能做也可以做，可是太烦了，懂不懂直接用BFC就可以实现啊。两列布局能明白吗？考你两列布局考虑就是BFC懂吗？OK，那两列布局的话，其实是有一些什么实际的应用场景的，我们可以来看一下，好，我再再来复制一个吧，点C点2B03。

我们来做个商品链，好，我们来做一个商品链，好，我去把那张图给拿过来。好，还是这张图CTRLC。CTRLB填进来好怎么办？好，我们来做一个商品链，我让这个left的这个区域的话，稍微变什么。呃，这样吧，我外面来个包区吧，Div外面来一个包裹区，叫做底下来一个left，跟什么right好样式五重叠吧，好中音。好，玻璃这个最小的我先留着吧，啊，也没什么用了，现在好，我们来做个手商品链，什么叫商品链了？好来看我给这个外来一个宽度，好，这个宽度为600PX吧，好，来一个。

Border e PX的实心黑色是不是好？我怎么让这个元素居中啊？那这个元素现在是不是没有居中了？而且你的怎么样，这个元素去中马上下为零左右凹凸吧，上下为零左右凹凸在什么时候会失效。浮动或者定位是不是OK，来看一下现在过来了，过来之后怎么办呢？呃，稍微调小一点，调成个300。好，是不是打的这样好，这个时候我让里面的一个left，我把它的高宽指定一下，Y为80PXK也为80PX，好，这边我干嘛？呃，Left我就不要了，好，OK，这边我给他来一张背景图，Background URL，好，NY imagine一下，这个小飞张点偏，让他no repeat来看一下，那现在是不是就进来了，好，怎么办呢？把他的头往上拎一拎。

怎么办？有没有学过一个叫白的position啊？有没有学过好应该提到过是不是，那这些东西到C3里面，我还给大家去重申一点，因为这是一个C3的属性，懂不懂OK怎么办呢？我把这个头往上拎一点好，负50负50PX负50负50是不是往外。往外扩相当于把这张图片什么。往这个方向再拎，能明白吗？好，看一下有没有拎上来，哎，同学们出来了，OK，来看一下什么叫商品链呢？这边可能试过一些商品的。展示吧，那底下可能是一些商品的金额吧，那这边是不是一些商品的描述啊，你看商品的描述跟这块区域是不是应该是一个干净的两点布局啊，好来看一下这么做好比如说这边就是我的一些商品的描述，好我把它写好吧，ESC啊一些。

描述好，呃，给了是不是还没给啊，好，比如说什么此商品。此商品贱卖，哎此此产品吗？此产品贱卖好买一送三，好打几个B2好走一来买OK来看一下这个时候他在哪位局好是不是在这底下布局的啊，可是我们说这个底下应该用来放什么。像商品的，比如他的金额啊，他什么，呃，卖家是什么放这些信息了吧，你整个商品的主页信息是不是应该放到放到什么这边来，那怎么办。怎么办？Left是不是就让它两列布局嘛，是不是怎么办为。特left嘛，那是不是就过来了，问题是现在文字图片了嘛，让你干干净净的怎么办？

干嘛让它开启PFC嘛，那是不是就是干干净净了，能明白吗？这个时候你看，如果我调整你的一个妈。Main。Right，我调整个right为10PX，你这么一样调整的话，那它们之间距离是不是就是哎。马是不是进去了，给Penny嘛，好，这个我们待会来讲，好Penny给一个10PX什么鬼。来看，给他描一个背景，Backward pink来看他在哪。这个区是不是在这块给一个marketing painting right。什么？In left吧，天呐，In left嘛，那这边是不是就有就有一定的电梯了，最好应该给marin吧，那你看现在诶给八给行吗。

给妈给洗吗？给妈为什么不行？来看一下他的模型。马马有没有有吧，只不过大家想想，因为它是不是浮动起来了，浮动起来的话，你这个马要不要进去啊。浮动起来，你不是提升了半层吗？Mountain是不是在下层，要不要进去啊，是不是要进去了看呢？看pad看点有没有进去啊，看点是不是随着内容内内容区块走的，看没进去啊，没有进去能不解啊，OK，那这边干嘛又踩了一个坑是不是好看点是不会进去的，好，那到这边是不是做了一个干净的燃料局啊，OK，可是这边大家想，有时候我这些文字是不是比较多啊，是不是啊，比如说我多什么？哎，我多来两份。

周年周年。这里这里来看一下这个时候是不是特别丑啊，那一般我们遇到这个需求是不是情况溢出显示省略号。有没有做过怎么让艺术显示省略号？好来看一下怎么做好这一边干嘛？三条样式首先。什么？我们说有一个东西叫white space等好，有没有接触过，还没有，那待会讲好，还有什么text。呃，Text文本溢出的时候你应该怎么办？文本溢出的时候让它显示省略号ES等等，还有一个属性比较重要，就是这个overflow head，明白吗？就是这三条样式干嘛？其实有四条，我们先做三条，这三条样式组组合在一起的时候，就能让文字艺术显示省略号，来看一下。你们想想了。是你不要告诉我干嘛，我写我在这边写，写个几个省略号行不行，不可以的，因为这些数据都是从后台拿回来的，他没有省略号的，能明白吧，就是完整的数据，好大家看，如果我缺当中的一条看。

有没有没有缺任何一条都不会，不会出现这种号走你没有啊好再来看。缺任何一条都没有，懂不懂必须这三条在一块，这三条是一个组合，那下午我们讲文本的时候，还我们还会来提懂不懂，先跟他打个照面，怎么一出显示省略号，这三条样式缺一不可，其实还有一个比较隐含的样式，DISPLAY1定要为block，如果你display不是为block的，他也不会出现的，呃，这个可能分情况啊，看依兰。好，它有吗？没有能明白吗？所以说干嘛其实有四条样式，那另外一条样式比较隐含，因为我们这个这个元素本身就是个快捷元素，能明白吧，OK，你看按照这一块是不是就出来了，好，这是我们讲的什么，怎么使用BFC实现两列布局，OK。