尚硅谷前端基础 (61)

好，呃，刚才介绍了一下浮动的一些特点啊，总之呢，你现在如果还都不是理解的特别好的话，你先记住了，哎，浮动在我们这儿目前来讲，主要目的就是让我们元素横过来啊，横过来哎，然后接着我们来说一下浮动的一些，这个在简单一些说一些浮动的一些其他的特点啊，其他特点啊，那这里边我们还是先整一个ML，写一个这个页面，哎，整一个div。嗯，Div呢，我们直接来一个点一个BOXS1，嗯，BOXS1呢，我们这儿来运行一下。写一个样式style标签，Style标签这是点一个box 1box一来一个100来个100，然后BY个color background个color，我们来一个井号，一个b fic，井号BFC呢在这儿很简单，对吧，然后我再写一个P标签，P标签呢，我就不写什么复杂东西了，我在P标签里整点这个文字，把我们这个鲁迅请出来，CTRLC粘过来。

写这么一行字啊，写这么一行字，那现在我们这就已经已经已经出来了，对吧？诶然后呢，我为了统一一下啊，我把这个默认钥式给它清掉星号，我们来一个MARING0，然后来一个PA定零啊默样式全都清除掉，清除掉以后来这我们来看，那现在这是BOX1下边这是一个P元素啊，别的都没什么好说的，现在还没有设置浮动，那接下来呢，我要给BOX1设置一个浮动，给BOX1设置一个浮动，那刚才我们提到过了，给我们这个元素设置浮动以后，这个元素会完全脱离文档流，脱离文档流以后，它便不再在我们的文档流中占据位置，那么它下边的元素是不是会自动往上去移动啊，哎，往上移动，也就是说它下边的这个整个这个P元素，它会往上去走啊，往上走，那我要问的问题什么呢？毫无疑问这个P元素肯定会往上走，这是这是一定的，但是问题来了，但是这个P元素里边是不是有文字啊OK。

你往上走不要紧，那么我的这一段文字是不是刚好会在它的下边啊，诶他的下边，那我的问题就是我的这一段文字会不会被这哥们给盖住呢？会不会呢？哎，不会话了，我们直接来看，我们给我们的BOX1直接设置一个float left啊FL敲一个table键一看效果，诶我们来看的确我们的整个P元素是不是都上移了，哎，都上移了，那我们要注意的一个问题是文字有没有被我们这个浮动元素盖住，哎，很明显没有，你是不是在我的后缘嘛，在我的后园是不是第一个字都能看见，哎，没有被盖住，所以这个也是我们浮动一个特点叫什么呢？我们的这个浮动元素它不会什么呢？哎，不会盖住我们这个文字啊，不会盖住文字，我们文字会什么呢？会自动环绕在我们这个浮动元素的一个周。

回啊，浮动元素的一个周围，所以这个时候干嘛呢？哎，所以哎，我们可以利用我们这个浮动，哎来设置我们这什么呢？设置我们这个文字环绕图片的一个效果，什么叫文字环绕图片，你看这新闻看报纸对吧，报纸这一个图片，图片周围是不是有那个那个文章啊，哎，那个文章这就叫一个文字环绕图片，那我们可以用这个做这么一效果，为什么可以做，就是因为浮动元素它不会盖文字啊，它不会盖文字，那这个东西呢，其实我们这儿说呀，我们可以利用浮动来设置文字环绕图片的效果，其实浮动在设计的最初，它的初衷就是为了实现这个文字环绕图片，它就是为了文字环绕图片，而我们现在把它用来做这个布局，实际上属于什么呀，哎，属于，呃，新开发的一个作用属于一个。

哎，等于把它用偏了，它本身就是用来这个环绕图片了，但是其实后来我们发现，诶，原来通过浮动还可以让元素横过来，于是我们就用浮动来做这个横向布局了，但是现在其实主要就变成横向布局了，文字环绕图片这个刀变成一个什么呢？变成一个这个辅助的功能了，啊辅助功能了，但是你要知道它会存在有这么一个特点。浮动元素不会盖住我们的文字啊，不会盖住文字，好，这一点我们就给他说完了啊，不多说了，比较简单。然后接下来是我们比较重要的要说一点了，说一个什么呢？诶，我们直接来个点一个BOX2，点一个BOX2呢里边啊，我们给他写一个，我得写一个东西啊，写一个hello hello，然后呢，我们给BOX2设置一个样式，点一个BOX2，点一个BOX2 box2以后呢，我们给它宽度高度都不写，我直接给它设置一个background color background color，我们来一个这个yellow吧，Yellow green说这么一个颜色，那现在这个hello这个东西是不是这个就是我们BOX2，诶BOX2是一个块元素，我们没有给它设置宽度和高度，宽度默认是凹度，凹凸是不是会把负元素撑满呀，高度默认是被内容撑开，所以现在它的高度是不是哈多高它就多高啊，诶比较简单，也比较好好理解，那接下来我们要说的什么问题呢？那当我们设置浮动以后，我设置浮动以后啊，我再看。

BOX2的效果我们来看，诶发现什么了，这宽度是不是没了，高度没变，但是宽度以前是这么宽，当我设置完浮动以后，宽度是不是变成这么宽了，哎，那这是为什么啊，这是为什么？那这里边我们来说一下，这一点也比较重要啊，我们来说一下我们这个元素设置浮动以后啊，浮动以后将会从我们这个什么呢？文档流中脱离啊，文档流中脱离，那我们说了从文档流中脱离以后，脱离后其什么呢？其性质我们叫什么呢？哎，元素的一些特点，诶一些特点也会什么呢？也会发生变化啊，也会发生变化，所以啊浮动以后为什么它会出现这种情况，不是因为浮度本身，而是因为浮动以后元素脱离了文档流，脱离文档流以后就会发生这些。

所以接下来我们说的特点并不算是浮动特点，而是什么呢？而是元素脱离文档流以后的特点，所以这里边我们要总结一下有哪些特点，那在这里边我们先给它整一个啊，我再整一个这个我复制一个啊，我这来一个BOX3 box3呢，我们整一个啊，这直接点一个这个BOX3，点一个BOX3 box3呢，我们给它来一个background color background color，我们来一个orange orange，哎，咱们来看啊，我现在不浮动，不浮动的时候我们来看二跟三是不是各占一行啊，哎，各占一行，当我二进行浮动以后，我们说了二是不是脱文档流，三是不是上去了，那这个时候注意二还有没有独占一行，哎，没有独占一行，所以这个时候它的特点我们说了脱离文档流的特点，哎，留着一个特点，我们一个个说，先说我们的块元素，块元素它有什么特点，第一个。

块元素不再独占我们页面的一行啊，脱离文档流以后，不再独占我们页面一行，换句话说它都不占地儿了，因为同步文档轴已经拖出来了，它就不在这个文档里边再占位置啊，不在独占一行二一个你看它的宽度，默认宽度之前是全部，但是当我脱离文档流以后，它的宽度多少宽度是不是哈，多宽它就多宽呀，诶如果它里边没有内容呢，它的宽度也就没了，所以这个时候就是脱离文档流以后，脱离文档流以后，我们的块元素的这个宽度和高度都被内容撑开啊，我们说是默认啊，默认你没有指定，你没有指定宽度和高度，那么它的宽度和高度就是被内容撑开，所以这个时候当你浮动以后，当你脱离文档流以后，元素的。

宽度还有没有说全屏这一说了就没有了啊，除非你指定全屏默认的话，那就是它有多少东西它就多宽啊，它有多宽，那接下来我们来看行内元素，行内元素也比较简单，我们直接来看一下span啊，Span来写一个啊，我是一个SPA span呢我给它一个class class我们叫做一个S1啊，S1我们这注掉，把这三也注掉啊，然后我们来看这个SPA，我们直接在这看啊，点一个这个S1 S1呢我们直接来个background color background color，我给它设置一个黄色一个背景啊，黄色yellow啊，黄色背景设置完了，那现在我们来看一下，我给他设置一个Y100 hi100，看看有没有用没用啊，我写大点，我写一个WISE200 hi200有没有用，哎，你写1万也没用，因为子SPA是一个行内元素，行内元素是不支持设置宽高啊好，那现在我让子SPA呢，浮动浮动啊向。

可浮动看什么什么情况了，宽高是不是生效了，哎宽高生效了啊，那也就是说当我死半浮动以后，宽高就可以去生效了，所以其实行内元素特点就是一句话，行内元素，行内元素脱离文档流以后，它会变成块元素，特点和什么呢？和我们块元素一样啊，和块元素一样，也就是说行内元素脱离小流以后，就变成了块元素，可以设置宽高了啊，并且它的宽度和高度默认也是被内容撑开，也是不会独占一行，也就是说行内元素脱离文档流以后，它的特点和块元素是一样一样的，再换句话说，脱离文档流后，脱离文档流以后，哎，我们就不需要再什么呢区分我们这个块和行内了，哎，脱。

低文档流以后就变成什么世界大同了，所有元素都一个样，无论你是块也好，还是行内也好，特点都是一样一样的啊，一样一样的好，这个是我们说的它特点，再强调一下，这部分特点是说的是元素脱离文档流的特点，它不是浮动独有的，以后凡是提到了说诶脱离文档流了，都是这么一个特点啊，都这么一个特点，好，那这个是我们说的一个浮动的一些特点的补充，我们这来还是停一下啊，停一下。