00:00
好,我们继续来上课,那么上节课呢,我们看了我们的这个。布局属性,那么这回呢,我们再来看一下我们的浮动属性啊,浮动属性呢比较简单啊。那它就这么几个属性,一个是什么,向左浮动,一个向右浮动,一个是什么。不浮动也是它的默认值啊,然后呢,另外呢,我们还可以清除浮动,那咱们来看一下啊,在这里边我们直接用代码来演示我们的浮动属性,当然浮动属性说难也难啊,说简单也简单,我们把这个该记的几个步骤记住就可以了啊,零七叫做这个浮动属性。那么在浮动的时候,我们就要想象,比如说。我面前比如说有个水盆,对吧,里面装满了水,装满了水对吧?那这块比如说有一个积木,那有个积木放到这里的,放到水上,它肯定是浮起来,对不对?我可以干嘛呢?我可以让它向左浮动,也可以让积木向右浮动,对吧?那比如说浮动完,你看这边没有位置了,我再来个积木组,是不是只能在下面放的了,对不对?那比如说再来个积木,再来个积木是不是这边有位置,我还可以再装它,是不是这个意思?哎,这就是咱们的这个浮动啊,浮动也就这个意思,比如说在这里边,你看我先做一个盆,对吧,比如说做一个盒子啊,做做box。
01:06
Class。等于box啊,然后呢,在这块我们给他这个盒子设置置一下样式style标签,叫做点box。给他设置宽度,呃,宽度多少呢?宽度六百二吧,六百二啊,然后高度也为。纤维620,纤维620,我们先看效果啊,Background背景颜色pink粉色对吧,好了,然后在这里边呢,我们多套几个元素啊,比如说再来div,比如点这个one。然后再来div。class.two。还有这个div.th three好了这三个元素,那么接下来我们来设置一下这个div啊,比如说这个div,我们给它一个这个width宽度为多少,为200。然后高度也为200好了,那接下来我再挨个设置每一个对吧,点万的啊,比如它的背景颜色变成什么呢?变成这个红色。
02:02
点two的,它的这个背景颜色B变成什么?变成这个绿色,然后还有这个点TR的,它的这个背景颜色。变成什么,变成这个蓝色不好了,那现在我们先看页面效果啊。来,你看是不是这样的一个效果对吧?那么有了这样效果以后,注意这里面由由于优先级的问题,所以我设置div,所有的div给他设置什么宽高200,在这块我是不是给重写了对不对,它的优先级肯定是高于它了,对不对,所以它不会去改变啊,好了,那现在咱们来看我当前有这样点区,我要想让它浮动,注意我要想让红色浮动,是不是将它浮起来对吧?注意啊,它所说的浮动,它会到达一个浮动层啊,所以我让这个红色相当于离家出走一样,我说浮浪你向左边去浮动。比如说我现在向向先让的向左边浮动走,你你看谁没了,是不是绿色没了,哎也就相当于什么意思啊,比如说这一家有三个孩子,那么老大走了,老大走了老二,也就是这个红色区块,不是红色,红色下面是谁绿色对吧,这个绿色区块是不是就是变成老大了,哎变成老大就干嘛呀,就上了老大的这个位置,上了老大的位置,也就是说被红色给挡住了啊,咱们来看我来这么样做啊,我们可能看不出来什么效果,对不对,那我换一种方式浮到它,我让它干嘛向右边去浮动,当这个红色向右边来浮动,是不是去到这里来了,那老大是不是上来了。
03:18
对吧,注意啊,这里边有两层,当前红色所在的这为一层,这是什么呀?浮动层,而原来这个呢,这物理层比如说叫了二层,它在这个浮动的下边啊,在这个浮动元素的下边,这个绿色区块啊,所以大家一定要明白这一点,你看啊,现在绿色区块我们给的是什么,我给他重写一下,比如WT就宽度变成多少,变成620,你看它是不是在浮动的下边。看到了吗?是不是在浮动下边对吧,比如说这里边一样啊,我把这个浮动层,我把这个浮动的这个红色啊,红色我先给它挪走。来,你看。那你看当我挪走以后,你看绿色是不是在到下面呢?哎,也就是说当我一旦给这个元素设置浮动了,好比这个元素它到了哪儿了,到了啊另外一个地方对不对?哎,出门打工了吧?啊,那好,那现在我还原回来啊,不用给它设置了,然后这个呢,我也不用right,大家知道怎么回事就可以了,我还依然用这个lo,那个left,那现在红色浮动出来了,绿色是不是占据了原来红色的位置,对吧?也就是说浮动元素一旦浮动走以后,不会占据原有的物理位置,对不对,它实际上是到达了浮动层,那现在我想要绿色也浮动出来,那怎么办?是不是在绿色这里边我也给了个浮lo来。
04:31
Left对不对,那现在再来看刷新,诶,你看绿色是不是到红色旁边了,因为什么刚才我说了,由于我红色一旦浮动走以后,那么它旁边还有这么大的浮动位置,所以我下一个浮动的元素这个位置能装下它,它肯定在这个位置来了,明白什么意思啊,那再来看啊,那比如说还有什么呢?还有一个蓝色对吧,蓝色呢,在家当老大呢,是吧?我让他也出去打工,也浮弄出来,那再来刷新,你看蓝色是不是挨着了,那比如说这边,这边是不父亲还有这么大的空间呢?那还有这么大的空间,我想问的是什么呢?你看比如在这里边我再给他一个D位。
05:05
Class就叫做for for对吧,那在这块我给了一个什么,给了一个景啊,不对,是点for。Fo。UR给他一个W,呃,不用了,宽度有了是吧,直接给他一个背景颜色,背景颜色为什么呢?为这颜色,那现在你看它刷新能看到吗?不能,为什么,因为老大老二老三都走了,他家是空的,所以他们在在是不是在这这底下底下呢?那现在我让他也进行左浮动啊来F2浮浪的,那当它也进行左浮动的时候,这边的这个空间还够承载它的了吗?不够了吧,那这个时候可以刷新,你看它是不是就下来了,对吧?因为什么,因为这边的空间不够状态了,对吧?除非怎么样,除非它的宽度是多少,它的宽度是20,我是不是还剩20像素,20像素好,你看整个父近的宽度是少是620,其中这个200,这个200,这个200就在600了,是不还剩个20,所以给他20,在他做浮动的时候,你看走你是不是上到这边来了。
06:01
看到了吧,这是不是这个粉红色是不是到这里边来了,哎,这就是咱们的这个浮动属性啊,这是咱们浮动属性。那么再来看啊,那我把它先注释掉,注释掉以后我们再来看什么呢?你比如说我现在都是让他什么都让它进行的,是左浮动对不对,那这个注释掉了以后,呃,这个也给它注释掉吧,啊我们用那么多没有用,我只用说什么需要用三个来演示就行了,我能左浮动也能干嘛,也能做右浮动来把它注释掉。注释掉,这个也给它注释掉,现在我们再来看刷新啊,默认元素都回过来了对吧?那现在我让第一块进行什么右浮动,是不是让它向右边去了,那刷新你看右边来了对吧?那如果我让第二块左浮动呢?这个时候咱们来看啊,我让第二块float left在左浮动,那它是不是依然在这个位置,依然在这个位置,而中间中间留有谁?中间是不是留有这个。还呃320焦素对吧,那这个绿色下边是不是蓝色,我让蓝色无论是左还是右,这都能很明显的看出,比如说现在左浮动,现在左浮动它是不是就挨着绿色区块了,是不是就是蓝色与红色之间距离二流像素,你看是不是这样的,如果我要让它,让它右浮动呢。
07:08
服了他。那你看这个时候再来。走你你看是不是就蓝色跟红色挨着了,对不对,而它距离什么距离这个绿色区管是不是就有这么20像素的一个元素了,对不对,哎,这就是咱们的浮动属性,你要么让它向左,要么向右,如果空间不够,它只能向下来了,能明白什么意思吧?哎,包括比如说我现在三个元素都浮动了,那当如果它要再有第四个元素的时候,对不对,那第四个元素比如说。继续开起来啊,那把它注释掉第四个元素啊,比如说我给他多少呢?我给它这个宽度啊200这没问题,但是高度呢,我给了多少呢?我给他这个300是不是超出高度100了,那这个时候你再来看刷新,你看他是不是在他后面了,对不对,同样啊,这里边我别人的200了,我也让他300乘300啊来你看。处理是不是在他后面被他给盖住了,对不对,哎,那么咱说了这个元素我不浮动的情况下,比如说在我不浮动情况,我就想让它在这个位置显示。
08:05
那怎么办?现在由于上面这三个元素,对它这三个元素的浮动,对我当下元素是不是已经产生了影响了,对不对,所以这个时候我可以干嘛呢?我可以清除浮动。在这里边我用什么呢?用。清除浮动,你要清楚哪个浮动,我来清除左侧浮动,那这个时候你来看刷新诶是不是下来了,对不对,那一样,我这里边有左侧是不是也有向右浮动的,我红色是不是向右浮动啊,蓝色是不是也向右浮动,那你看我在这里边red清除向右浮动,你看行不行。走,你是不是也能下来,对不对,因为什么?因为这里边我统一都是什么,不是统一是有向左的,也有向右的,所以这里边我无论用向清除左浮动也行,清除右浮动是不是也可以对吧?但是这样呢,这种概念呢,容易让我们混淆对吧,不好去记忆,这里边有个情况,比如说我只给可乐right的话,但是前面所有元素都是什么,比如说都改一下啊。我left,现在我left是不是好使了,来刷新left好使对吧,现在你来看啊,我这个给它改成什么float left。
09:10
这叫right啊,还叫right RI接都我现在要干嘛呢?我让所有元素现在只有中间那个向左浮动,对吧?我让它所有元素都向右浮动,都向右浮动以后现在再来刷新,你看我给的清除浮动好使吗?不好使了,你看我上面所有的元素,三个元素都是float right,都向右浮动,而清除的时候我只给了什么clear LA是不是就不行了?哎,所以这个时候我要清楚的话,我就只能clear right。周你是不是下来了,哎,也就是说clear干嘛呢?主要的作用就是用于其他元素的浮动对当前元素造成的影响,对吧?那clear light呢,就是用来抵消float left的,Clear right呢,就是用来抵消float right的,但是呢,这样的话我们不好去记,所以这里边我们推荐大家使用什么?直接使用一个clear clear冒号Bo什么意思,清除两边的浮动啊,不管你是左还是右,我直接clear boss再来刷新,你看是不是也保持在这来了。
10:00
对不对,也就是说第一我可以使用让元素浮动,不能让元柱下来,第二我这边可以清除这个浮动,也能让元柱下来,对不对,哎,这就是咱们的这个可乐尔清除浮动啊,清除浮动。好了,那咱们来看一下啊,在这里边clear left就是用来抵消float left的,对吧,Right呢,就是消right的,这个boss呢,就是用来清除怎么样两侧的啊,只要是浮浮动的,那都会被什么清除掉啊,那这个NNE是默认值,我们就不需要演示了,对吧?它不浮动,那你你给他写的有什么用,比如说这里边我来给它到它NNEF。O at为N有什么效果吗?没有任何效果。对不对,没有任何效果,那比如说在这里面已经不浮动了,我直接N来再来走你。哎,这回什么是有效果了,为什么有效果,因为它不浮动了,蓝色不浮动了,它占整个这一行,对不对,当前这一行。但当前这一行,但当一行这个红色是不是就得下来了,就不叫红,对粉红色是不是得下来了,对不对啊,所以这个呢,演示没什么效果啊。好了,来把它这个再开起来啊,开起来以后再来保存,OK,这是我们浮动啊,那这里边我们还需要注意什么呢?还需要注意一个问题,就是咱们来看啊,比如说我当前这里面都是给的什么,都是给的这个div标签对不对,好了我再来一个,比如再给一个标签。
11:15
写上我是失败。Spn SPA,好了,我们先来看啊这段文字。哎,在这呢,是不是有啊,哎,由于上面元素是没浮动对不对。我把第四个元素注释掉了啊。然后这个元素呢,我们给它注射掉了啊,不要了,不要以后现在我们来看。再来刷新,哎。好了,你看我是死SPA,是不是只要有空它就能钻呢,对不对,哎,那好了,那接下来我们干嘛呢?我要死SPA,我给他设置一下,咱们说了死盘标签有宽高属性吗?宽度比如说我让它为200,高度我也让它为200,然后back GR,为什么呢?为这个PP紫色,现在你来看我的死慢标签能逃什么?
12:01
是不行啊,没有宽高属性对吧,但是一旦我给它设置float left了,或者我让它float right float right是不是在在这行让它向右浮动了,那这个时候你来看走。刷新。嗯。SPA标签float啊,Lo right,好了,这回对了啊,这个时候就来走,你来,你看向右浮动,一旦浮动,你看我是SPA,我是判S呢,我没给吗?没给是吧,来加一个啊S好了,这个时候再来S你看。它是不向右边浮动了,而且这个元素一旦浮动以后,它的this play属性就失效了,对不对,是不是可以设置宽高了,哎,所以在这里面大家记住,任何一个元素一旦使用浮动属性以后,它的base play属性都可以都该干嘛,都会完全失效啊,那我们返回到笔记里边,我们来记一下,在这里边我们要写一个注意的啊。叫做任何元素。一旦使用flt float属性,那么它。
13:05
它的play属性将完全失效对吧,均可以设置宽高对吧。穿高啊,效果类似于。BOCK。啊,效果类似于一兰block啊好了,这就是咱们的浮动,那么另外浮动的时候我们还要注意什么呢?咱们比如说再来看啊。你看当前我这么测试的时候,它的负类是有什么,负类是有宽高的对不对,那现在我们再来做一个负类没有宽高的效果啊,来看好了,找到A2这里边,诶,呃,零八还是一样浮动属性。浮动属性。二。来比如说这里边我们定义一个负类叫做fat发了对吧,然后呢,在这里边有div.Y啊,CTRLCVV。
14:06
点点two。还有t re,好了,现在咱们来看啊,我给他的副类不设置宽高,我只设置一些其他样式井号fat给他设置什么呢?设置一个BABA。来自ground,比如说负类,我依然让它为这个粉色啊,好了,接下来开始里面的点one,我来给它设置啊,WTH,比如说给他200。Het也为200。好了,然后B。给的这个颜色。现在各位我们来看,当我没有设置负类,没有设置宽高的时候,负类是不是跟随着子类的宽高对不对?哎,因为我用的是这个div元素,所以它默认占的满屏宽,但是高度呢,是不是由子类决定的对吧?那现在再来看,我现在刚有一个孩子对吧,刚设置一个孩子宽高,其他这两个,这个to跟string并没有设置,所以他没不显感知不到,对吧?那我再来个to,比如说宽度也一样,我给它设置为200,然后高度呢,我也给它设置为200 B是K加用力来个go上给它设置一个。
15:10
B,好了,现在咱们来看周,你是不是两个元素了,对吧?因为这两个元素的高度我都给了,两个子元素高度给了,所以它负元素是不是也是自动增高了,那再来看我还有谁呢?还有第三个元素。点TH给它的WTH宽度也一样200,然后高度呢也为200,然后B给他再来一个,再来一个什么,再来一个加一绿色,好,现在我们来看。刷新,诶你看当父类有三个孩子的时候,高度三个孩子加起来高度是600,那父类的高度是不是也就600了,对不对,这个时候是没问题的,但是如果一旦比如说我给他的第一个孩子float right,我让他向右。啊,让他扶从走了对吧,当扶从走以后,这个时候走,你你看老大离家出走了,那当前在家里面是不是只有老二和老三,那么父亲是不是只有两个孩子,所以父亲感知到的时候,是不是只感知到了老二和老三了,对不对,那同样再来,那比如说。
16:04
在这里边啊,这样我咱们给副列设置一个宽度吧,高度不是咱给设置个宽度啊,宽度它为六百二小度啊,咱给那么整满边宽也没有用来刷新好了,让它缩小回来了啊,缩小回来以后再来看,那么这个时候我再给谁呢?再给老二,比如说这个蓝色,我让他也离家出走,这里的f l float我也去rap去对吧,去RA这里边去float啊好了。再来刷新,你看这个时候父亲干嘛?是不是又在缩小啊,对不对,还有谁呢?在这里面是不是只剩绿色这一个老三在家呢?哎,那好,如果老三。我也让它float f。Float,怎么float left向左了啊,向左的话,中间是不是还是这个位置会留有这么大空白啊。诶,谁没了?父亲是不是没有了,为什么?因为这里边三个孩子,1233个孩子是不是都通通的离家出走了,对吧?都去外打工了,那么父亲是不是在家中就没有孩子了?没有孩子他是不是就感知不到孩子的高度了?
17:04
对不对,哎,所以这个时候它的这个高度没有了,那高度没有了,就相当于这个父亲的元素是不是就隐藏掉了,哎,那实际是隐藏了,不是,只是他感知不到里面的高度了,对不对,那好了,那这个时候我们怎么样让负类感知的高度呢?第一种情况确实是我们可以通过什么,通过高度属性让负制负类强制设定一个高度来,你看。酸性是不是有高度了,对吧,这是负类强制设置高度的啊,这是第一种方式,我可以干嘛呢,强制设置高度。当。子类。浮动十啊负类。感知不到子类的高度啊。高度啊解决方式。第一种方式。强制设置什么呀,这个负类的高度就可以了啊,也就是说我们实际在使用浮浮动的时候,你只要把负类的宽高设置好以后,里边的子类你可以任意的浮动,它永远不会超出负类,对不对?那么第二个第二种情况怎么解决呢?
18:17
第二种情况很简单,干嘛,我让副类也出去打工,是不是就能找到儿子了?哎,让副类,让副类也出去打工是吧,也就是不动啊,也浮动,那现在咱们来看啊,现在副类是没有浮动的,对吧?所以它又没有了啊,如果让负类,比如说我来个float,我让它去右边对吧,让它浮动到右边,那这个时候来看刷新是不是向右浮动了,向右浮动以后一样,他是不是也感知到指内的高度,因为什么他也到了浮动层,到了浮动层他是不是找到了这三个儿子,对吧?同样带着这三个儿一起是不是靠右来了。对不对,哎,那这个时候它的高度也能有啊,这是它的第二种方式,那么第三种方式呢,第三种方式我们还可以干嘛呢?因为有的时候啊。我们不需要让负类浮动,因为负类一旦浮动以后,我们通过后期再通过学合作模型的时候,没有办法让这个元素居中,所以我们不需要让负类浮动,那么这个时候我们就可以用另外一种解决方式干嘛呢?使用设置。
19:12
属性,Overflow。等于hid dn。哎,这个属性干嘛呢?是不是超出部分隐藏啊,是不是这个属性对吧,那么在浮动中。给父类设定overflow冒号hidden。可以干嘛可以。让父类自动感知子类的高度啊,子类的高度,好了,那你看在这里边我直接加一个olo,等于head。好了,那现在我们来看,这回我们再来刷新。你看负类此时是不是也感知子类高度了,对吧?哎,它没有浮动啊,你看如果我把这个去掉,去掉以后,负类这个这个颜色又没有了,好又没有了,那这个时候我给它加回来啊,加回来以后再来刷新是不是就有了对吧?哎,这三种方式都可以,干嘛让父类去找到子类啊,好了,那只要在对于浮动而言,我们记住这些就已经足够了啊,就已经足够了,这里边我们要注意的是什么?
20:18
如果这个子类浮动对吧,负类没有设置宽高的情况下,没有设置高度的情况下,对吧,那么负类将。感知不到子类的高度,此时父类的高度变为零,对吧?那么如何解决呢?解决解决方式一啊,干嘛呀,强制。为负类设置高度,这是第一种方式对吧?那解决方式二呢,干嘛让负类也进行浮动,是不是也可以,那解决方式三。给。
21:01
负类设置什么olo等于hi hidden啊,设置这三个都可以啊,那么一般常用的是解决,常用的是一跟三这两个方法啊,让负类浮动的这种方法很少,因为一般负类我们都给它作为什么作为最外层的元素,然后去包含了里边N多层元素啊,这就是咱们的这个浮动啊,如果子类浮动,负类没有设置高度情况下,OK,没有问题啊,负类将感知不到子类的高度,此时负类高度变为零,对吧?通过这个方式,这三种方式我们都可以干嘛,都可以进行解决啊。那么好了,那么浮动属性基本的操作我们是会的,对吧,但是一样布局页面也对于我们来说是一个什么,是一个难题了,哎,那OK,那我们这节课到这里,下节课呢,我带着大家去简单的布一下页面布局的一个大框,然后去感受一下啊,我们使用浮动属性如何来布局了。
我来说两句