在前段时间的学习中遇到点小问题,在这里和大家分享一下:
正常情况下对所有元素使用浮动,元素会按顺序排列,直至盒子占满,元素自动换行至下一行继续按顺序排列。效果如下图:
在我对其他几张照片进行排班的时候使用浮动,对所有图片进行了向左浮动,但有一张图片却被挤出了我所设置的大盒子父元素。
可以看到,几张照片宽加起来也没超过父元素的宽,这是为什么呢?
经过一番查探,我发现我给这六张图片放在了一个盒子了,泰国酒店这张图片又另外放在了一个盒子里。我只是给所有图片设置了浮动,两个小盒子并没有设置浮动,那为什么就会被挤出父元素了呢?
我们先来了解一下块元素的特点:块元素独占一行
在没有给它设置浮动的情况下,块元素会占据空间.
给所有盒子设置一个左浮动
设置浮动后再看一下效果
这就回到了我们开头看到的情况。
这样问题就找到啦,即使给泰国酒店那张照片设置了浮动,6张照片所在的盒子依然占位,并独占一行,所以被挤出了父元素
所以我们这里给两个盒子分别一个浮动就能解决问题啦
这样问题就解决啦,哈哈问题解决,心情舒畅。