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

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

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

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

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

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

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

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


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

设置浮动后再看一下效果


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

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



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



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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • 一、盒子模型 1、盒子CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里,我们只需要将相应的盒子摆放到网...
    瘦不下去了阅读 2,193评论 0 0
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    繁华退却阅读 1,770评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • 那天,007的战友群里说,这次的主题要写在国庆发生的事,琢磨了一下,不如就记乔迁之日吧~ 真想大声的喊:我们终于搬...
    柠檬汁爆米花阅读 260评论 0 1