day13 CSS浮动属性

　　接下去的规划，不谈互联网+（互联网+根本没法规划），谈谈我自己本来的规划吧，我原本打算这个暑假和朋友一起做游戏，但是奈何我和我朋友这个暑假都有自己的事情要做，那只能往后推了。接下去我的目标是学完前端三件套，学习Vue框架，搭建一个属于自己的博客，前几天去物色了一下，打算买个云服务器，域名都想好了: www.br0sy.top 那么搭建这个网站，我可能还要有很多的前置技能树，不可能学完前端就能做的特别好了，所以在这个暑假我还报名参加了Java后端的一个培训，虽然我个人认为会比较水，但是可能有一个学习的氛围我会学的更快， 然后其实这个网站我也不想仅仅是作为博客，我想把这个作为我的个人网站，上传我的日记，我周围的朋友关系等等（不过这个要考虑安全性了），总之总目标是在这个暑假实现一个博客的搭建。然后第二个目标，就是我想在大学期间成为一名B站up主，我想在这个暑假先学一点视频剪辑的技巧，然后到一个特定的时间段，开始去发自己的作品。（这是小时候的梦想了啊，小时候就想做个发视频分享的人，小学的时候我就发过自己玩《我的世界》的游戏视频了，哈哈但是当时不知道保存，现在都不知道那个视频去哪里了）

 

对图片设置浮动属性.(当然文字也是可以设置浮动属性的)

float: ; 设置浮动属性.使得文字能够对图片进行环绕显示

设置浮动属性的元素的特点：

(1) 浮动的元素脱离文档流.

(2) 浮动的元素互相贴靠，没有间隙.

(3) 浮动的元素具备行内块的特点，可以指定高宽.

 

清除浮动，也称为“闭合浮动” 使用 clear 属性完成

目的：为了解决父元素因为子元素浮动引起的内部高度为0的问题

方法：

    1、额外标签法(扰乱代码结构，不推荐)

    2、将父元素的 overflow 属性设置为 hidden(可能会导致父元素的溢出部分无法正常显示，但是是最常用、最简单的方法)

    3、伪元素法(比较推荐的方法，以下也只讲这个方法)

清除浮动：

单伪元素方法：

在父元素中添加 class="clear"

在CSS代码中：

.clear:after {

    content: ".";

    visibility: hidden;  //将内容隐藏起来

    display: block;

    height: 0;

    clear: both; //将两边的浮动属性都清除

}

如果是IE6-7的浏览器，则需要添加以下代码:

.clear {

    *zoom: 1;

}

 

双伪元素法：(推荐)

.clear:after,

.clear:before {

    content: "";

    display: table;

}

.clear:after {

    clear: both;

}

 

.clear {

    *zoom: 1;

}

 

min-width属性：

定义页面宽度呈现的最小的布局，当浏览器页面小于此宽度时，就不会出现元素继续被压缩的情况，而是出现滚动条。

 

圣杯布局：

实现中间内容和上下内容高度不变，宽度会随着浏览器的宽度发生改变的效果.

注意父级元素的 position 是 relative 而子级元素的 position 是 absolute 或者是 relative

双飞翼布局（自己了解）