59.尚硅谷_HTML&CSS基础_浮动二.avi原创

这块刚才好像有一个地方好像是写的不太对啊，我们来说这个文档流的时候，我说了，当元素的高度和宽度只设置为凹度时，此时内边距不会影响我们这个可见块的一个大小啊，会自动修正这个宽度和这个高度，实际上应该是高度，它不会修正，为什么呀，高度是被被内容撑开的吧，诶被灯容撑开，它的特点就是什么呀，它就有多少就是多少了啊，所以这块不是适用于高子，可能写的时候就没多想就写了，是吧，所以你们注意啊，包括看我这个笔记的时候，你们都一定要注意，我就有几个字忘写了，你们就记住我这个笔记，包括这个注释都是什么呀，仅供参考啊，仅供参考，可能会有一些什么呀，可能会有一些小的纰漏，因为这都是上课现写的，可能什么呀，有的时候这个脑子哪根弦没答对是吧，可能就写出来了，可能有一些并不是严谨，所以你看到有些问题的时候，你不用你一定要仔细的去。

推销一下是吧，哎，仔细推销一下，这就这也是避免，我也是故意的是吧，其实避免你们就是哎，避免你们看笔记的时候不认真是吧？哎，这是我特别这个独特的教学方式是吧？独特的教学方式，哎好还有嗯，行了啊，咱们就不说了啊，你咱们就是心照不宣了是吧？来接下来我们来接着来说我们这个浮动，还是来说我们这个浮动，浮动这块呢，我们再写一个东西啊，这边简单写一个，写一个什么呢？写一个这么一个，诶div我们来一个井号div点一个BOX1，然后呢，我给报，然后在这我再创建一个这个P标签啊P标签这里边我直接来一个style，来一个什么呢？这个P标签也给他一个class吧，叫一个这个P1，这边我直接写一个这个点，一个BOXS1BOXS1，我们来一个Y，来一个100个像素。

然后来一个head，也来个100个像素，然后来个background color，来个这个井号BV保存，现在呢，我再设置一个这个点一个PE给我们这个呃，P样式宽度我就不设置了，来一个高度，高度来一个呃200个像素，然后呢，Background color background color我们来一个这个呃来一个yellow吧，这么一个颜色，那我们说了P1这个元素，这个P元素我没有设置宽度，宽度什么呀？哎，是不是负元素的全部呀？哎，负元素多宽它是不是就多宽呀？哎来保存CTRL1运行，诶是我么一个效果，这也是我们这个P元素，这是我们这什么呀，Div对吧？诶div，那这里边发现他们是不是有这么一个距离啊，这哪来的是默认样式啊哎，默认样式如果你不需要给他来什么呀，哎，给他去了信号，我们来一个这个maring再零，再来一个我们这个HEADING0保存，我们这一刷新走，你是不是就过来了，诶过来以后呢，我们来看一个问。

你那现在我干嘛呢？我让这个box一来一个float，来一个left box1我们来向左浮动，诶那它向左浮动，我们说这一块会是一个什么效果，BOX1向左浮动，它是不是脱离文档流啊，它一脱离文档流，我们这个P元素是不是就上去了，哎，所以我这一刷新应该是BOXS1把这个BOX2这个P元素盖住一部分对吧？诶盖住部分这能理解对吧？诶然后咱们再看现在我们这个P元素吧，还比较简单，我们来往P元素里边干嘛呢？诶咱们先给它换回来啊，一刷新这又回来了，回来以后呢，来我这个文本，我给他来点字。Contrastate。CTRLV粘过来，现在就有字了，一刷新，诶是这样的，那就有字，有字了以后呢，高度我都不用设置了，高度我不设置，是不是被它这个文字撑开了呀？哎，被内容撑开了，那现在问你了，我还是给BOC设置浮动保存，那现在什么效果，是不是应该跟刚才一样啊，一不一样，诶应该会一样的，但是我们主要看什么呀，这个字诶就是说我这个BOX11浮动，Box这个P1是不是拱上去啊，拱上去以后等于是我bos一会盖住我们这个P1的一部分吧，诶那问题来了，它会不会盖住我们这个P1的一个文字呢？诶来我们直接看效果啊，这一刷新来走你。

诶盖住了吗？哎，你看在我的后边是不是还是这个呀，哎，还是这个字，所以注意我们要说的是什么，浮动的元素会不会盖住文字，不会啊，所以这块一定要注意，这也是一个特点啊，这个特点我们来说浮动的这个元素不会住什么呀，文字啊，不会盖住我们这个文字，文字会什么呢？会自动环绕在什么呀，我们这个浮动元素的一个周围啊，会自动环绕在我们这个浮动元素的一个周围，所以什么呢？哎，所以我们可以什么呢？我们可以通过诶什么呀？诶设置浮动，诶那你像文字可以环绕在这个元素的周围，这有点像什么呀？诶我们有这么一个效果，可以整一个图片，图片周围是不是环绕文字呀？哎，我们可以通过浮动来干嘛呢？来设置什。

哎呀，诶通过浮动哎来设置一个这个文字哎环绕哎图片的一个效果，其实这也比较简单，其实你就把div换成图片是不是这个效果呀？诶这个效果啊，文字环绕图片效果，所以这里边注意浮动不会盖着这个文字，但是其实呢，诶我们说了，我们这儿说的什么呀，可以通过浮动来设置文字环绕图片效果，其实浮动的这个属性创建本身就是为了什么呀。

就是为了文字环绕图片，我们用它做了布局，其实什么呀，其实不是它原本的一个目的啊，不是它原本的目的，原本目的就是什么呀，为了文字环绕图片，但是我们现在已经干嘛了，已经主要用它来对页面进行布局了啊进行布局了，好了，这也是我们说浮动这个特点，注意啊，浮动元素不会盖住这个文字，好，那接下来我们再来说啊，那这块就翻过去了，就说完了，那接下来我们再来说一什么问题呢？还是来说一下我们这个浮动的一个特点，那浮动呢，这个P标签啊，我先给它住了，不要这个P标签了，住了以后保存，现在一刷新是不是就剩我这个div了，诶div咱们来看一下div现在我不设置宽度，然后呢，我也不让它，呃，咱们这样吧，我单独再写一个，别在这写新建一个，我们来个12，诶接着来说我们这个浮动这里边呢，我们来写这么一个这个div div给它点一个BOX1，然后我们来设置下样式div。

对，他直接来一个这个style，我们来一个这个点，一个BOX1BOX1，我来一个这个不设置来一什么呢？来一个这个head headde来一个100个像素，然后background color来什么呢？来个井号别飞，诶我说这么一个，那我们说了宽度没设置默认是什么，哎，是不是负元素的100%啊，咱们说了在文档流里，哎，在我们这个文档流中。我们这个诶元素的这个宽度默认占什么呀？占诶负元素的什么呀？诶全部啊，默认子元素的宽度默认占我们这个负元素的全部，所以我们来看效果，诶还是它呀，CR运行它，诶你看我这div是不是整个全屏了呀？诶我这浏览器宽了，它是不是也跟着宽了呀？诶浏览器宽了它也跟着宽了，那现在我们来说了，这是它在文档流住，诶那我们说如果干嘛呢？如果让它脱离文档流，我来一个float来一个什么呀？Left我是不是向左浮动了，诶向左一浮动干嘛了，是不就脱离脑瘤了呀？哎，那我们说了，当元素设置浮动以后会什么呢？会完全脱离文档流，也就是说我们这个BOX1这个块元素还在不在文档流里了，不在了那。

问题就来了，不在文档流里，它的宽度还会不会占负元素的全部来保存，直接来看一刷新走你哎呦没了，哎，真走了是吧？哎，没了，那没了证明什么，宽度还有没有了？哎，没了我来写一什么呢？写一个A，随便写一个保存，我们来看易刷新，诶是不是就这么宽啊，A多宽，它是不是多宽啊，那宽度现在干嘛了？哎，是不是被内容被子元素撑开了呀？哎，被内容撑开，那高度呢？高度现在我是不是设置了呀？哎，高度我不设置保存，我一刷新走，你是不是也是被内容撑开呀？哎，被内容撑开啊所以这里边我们来说一下这又一个特点叫什么呢？块元素，哎脱离文档流以后啊，它什么呢？哎，高度。

和我们这个宽度都被什么呀？诶内容撑开啊，快元素脱离暖流以后，高度和宽度都被内容撑开，也就是说宽度还会不会占负元素全部了，不会了啊，都是由什么呀，由它的这个内容，也是它这个子元素来决定啊，这是一个特点，然后再看还有什么特点，那这个块元素呢，其实呢，主要这么多啊，那这里边我们主要说的什么呀，并不是它浮动的特点，而是什么呀，而是脱离文档流的特点，只要元素一拖，联档流特点都都是什么样，都是这样啊，特点都是这样，那接下来我们再看说完快元素还有谁呀什么的连元素啊，我来一个SPASPA，我这来一个class，来一个S一来一个这个hello，保存，然后一刷新，我们说了内联元素这个我们先不让它浮动了啊，保它浮动了保存，我们来看这个内元素是不是这个hello啊，内联元素的宽高默认什么呀，在文档轴里。

是不是被内容撑开呀，哎，被内容撑开，那这边我们来看效果，直接来一个点一个这个S1，我先来一个外，来一个100个像素，然后来一个hat，也来一个100个像素，然后来一个background color，来一个这个yellow，这么一个内联元素，来我这一刷新走你诶这么大个，那我问你。Wise和has有没有用？哎，没用，我们说了，因为内联元素不能设置宽高吧，哎，不能设置宽高，来我们来看开启我们这个呃，SPA的一个什么呀，浮动直接写float left保存直接看效果，我们来看一刷新走你干嘛了，宽高是不是生效了呀？哎，宽高就生效了，所以这里边我们来说叫什么呢？内联元素开启浮动以后它干嘛了，它是不是也脱离文档流了，哎，也脱离文档流了，所以这里边我们来说叫做内联元素脱离文档流以后什么呢？诶叫什么呀？诶会变成快元速，所以你会发现我设置宽高干嘛了，是不是就起作用了呀？哎，那换一句话说，一旦离开了文档流，我还用不用区分什么。

内联什么块了，哎，一旦脱离文挡瘤全都是什么呀，全都是块，而且它什么呀，它的宽高全都是被什么呀，内容撑开的啊，全都是被内容撑开的，所以这里边是我们说浮动的这么一个特点啊，一个特点说这么两个一都是托离纳轮一个特点啊，快元素宽高被内容撑开，内链元素变成什么呀，快元素啊变成快元素，好这是我们说浮动的又一个说什么。