CSS的浮动以及盒子模型

点击上方“程序员大咖”，选择“置顶公众号”

关键时刻，第一时间送达！

    先不说楚枫的这般年纪，能够踏入元武一重说明了什么，最主要的是，楚枫在刚刚踏入核心地带时，明明只是灵武七重，而在这两个月不到的时间，连跳两重修为，又跳过一个大境界，踏入了元武一重，这般进步速度，简直堪称变态啊。

    “这楚枫不简单，原来是一位天才，若是让他继续成长下去，绝对能成为一号人物，不过可惜，他太狂妄了，竟与龚师兄定下生死约战，一年时间，他再厉害也无法战胜龚师兄。”有人认识到楚枫的潜力后，为楚枫感到惋惜。

    “哼，何须一年，此子今日就必败，巫九与龚师兄关系甚好，早就看他不顺眼了，如今他竟敢登上生死台挑战巫九，巫九岂会放过他？”但也有人认为，楚枫今日就已是在劫难逃。

    “何人挑战老子？”就在这时，又是一声爆喝响起，而后一道身影自人群之中掠出，最后稳稳的落在了比斗台上。

    这位身材瘦弱，身高平平，长得那叫一个猥琐，金钩鼻子蛤蟆眼，嘴巴一张牙带色儿，说话臭气能传三十米，他若是当面对谁哈口气，都能让那人跪在地上狂呕不止。

    不过别看这位长得不咋地，他在核心地带可是鼎鼎有名，剑道盟创建者，青龙榜第九名，正是巫九是也。

    “你就是巫九？”楚枫眼前一亮，第一次发现，世间还有长得如此奇葩的人。

    巫九鼻孔一张，大嘴一咧，拍着那干瘪的肚子，得意洋洋的道：“老子就是巫九，你挑战老子？”

    “不是挑战你，是要宰了你。”楚枫冷声笑道。

    “好，老子满足你这个心愿，长老，拿张生死状来，老子今日在这里了解了这小子。”巫九扯开嗓子，对着下方吼了一声。

    如果他对内门长老这么说话，也就算了，但是敢这么跟核心长老说话的，他可真是算作胆肥的，就连许多核心弟子，都是倒吸了一口凉气，心想这楚枫够狂，想不到这巫九更狂。

    不过最让人无言的就是，巫九话音落下不久，真有一位核心长老自人群走出，缓缓得来到了比斗台上，左手端着笔墨，右手拿着生死状，来到了巫九的身前。

    “我去，这巫九什么身份，竟能这般使唤核心长老？”有人吃惊不已，那长老修为不低，乃是元武七重，比巫九还要高两个层次，但却这般听巫九的话，着实让人吃惊不已。

    “这你就不知道了吧，巫九在前些时日，拜了钟离长老为师尊，已正式得到钟离长老的亲传。”有人解释道。

    “钟离长老？可是那位性情古怪的钟离一护？”

    “没错，就是他。”

    “天哪，巫九竟然拜入了他的门下？”

    人们再次大吃一惊，那钟离一护在青龙宗可是赫赫有名，若要是论其个人实力，在青龙宗内绝对能够排入前三，连护宗六老单打独斗都不会是他的对手。

    只不过那钟离一护，如同诸葛青云一样，也是一位客卿长老，所以在青龙宗内只是挂个头衔，什么事都不管，更别说传授宗内弟子技艺了，如今巫九竟然能拜入他老人家门下，着实让人羡慕不已。

    “恩怨生死台，的确可以决斗生死，但必须要有所恩怨，你们两个人，可有恩怨？”那位长老开口询问道。

今天我们来了解一下浮动

我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动

这是没加浮动的页面效果：

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

单独看上面的解释理解起来有点难度~,那么现在我们就来使用一下浮动

右浮动:

单独一个div块向右浮动

左浮动:

这样所有的元素就都在一行了

但是要注意一些情况:

当包含的框的宽度不够的时候会把最后一个div块挤到下一行,直到有足够的空间放下它

浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

还有就是：当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。就像下面这样~

这个时候就需要使用clear来清除浮动了

clear 属性定义了元素的哪边上不允许出现浮动元素，上面的情况直接加在div1上面是没有效果的~

我们可以创建一个空的元素来清除浮动~

css的盒子模型

其实这些HTML页面上的元素其实就像一个个小盒子一样~

打个比方：

我们收快递的时候,打开快递盒子,盒子最中间的就是我们买的物品,也就是内容,然后盒子就是边框(border)自身也有一定的厚度,盒子到物品之间的距离就是内边距(padding),那么如果我们一次取了很多快递,快递盒子之间也会有一定的距离,这就是外边距(margin)

其中内边距、边框和外边距的数值都是可选的，默认值是零

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加整个元素框的尺寸。

至于如何设置这些属性的值。

就不详细的说了~

伙伴们可以自己来实验一下

• https://mp.weixin.qq.com/s/lmjqprrD6wQlUyCIDzpEsw

• 程序员大咖整理发布，转载请联系作者获得授权

【点击成为源码大神】