web前端新手入门，你一定能看得懂的浮动

在前段时间的学习中遇到点小问题，在这里和大家分享一下：

正常情况下对所有元素使用浮动，元素会按顺序排列，直至盒子占满，元素自动换行至下一行继续按顺序排列。效果如下图：

在我对其他几张照片进行排班的时候使用浮动，对所有图片进行了向左浮动，但有一张图片却被挤出了我所设置的大盒子父元素。

可以看到，几张照片宽加起来也没超过父元素的宽，这是为什么呢？

经过一番查探，我发现我给这六张图片放在了一个盒子了，泰国酒店这张图片又另外放在了一个盒子里。我只是给所有图片设置了浮动，两个小盒子并没有设置浮动，那为什么就会被挤出父元素了呢？

我们先来了解一下块元素的特点：块元素独占一行

在没有给它设置浮动的情况下，块元素会占据空间.

给所有盒子设置一个左浮动

设置浮动后再看一下效果

这就回到了我们开头看到的情况。

这样问题就找到啦，即使给泰国酒店那张照片设置了浮动，6张照片所在的盒子依然占位，并独占一行，所以被挤出了父元素

所以我们这里给两个盒子分别一个浮动就能解决问题啦

这样问题就解决啦，哈哈问题解决，心情舒畅。