css float left布局换行不正常问题的解决
发布时间：2018-09-06 15:11:10 作者：江湖游医黄半仙 
我要评论
我要评论这篇文章主要介绍了css float left布局换行不正常问题的解决的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的
结果出现了这样的情况
页面的html是这样的
<div class="block">
<div></div>
</div>
<div class="block">
<div></div>
</div>
<div class="block">
<div></div>
</div>
<div class="block" >
<div id="special"></div>
</div>
<div class="block">
<div></div>
</div>
<div class="block">
<div></div>
</div>
css
.block {
width: 25%;
padding: 10px;
float: left;
box-sizing: border-box;
}
.block div {
background-color: pink;
width: 100%;
height: 280px;
}
#special {
height: 280px;
background-color: green;
}
这样的代码布局如最开始的图是正常的，但当special的height小于280px时就会变得不正常。
然后去看了下float的定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动的边框为止。
也就是本来第二行的想float到左边，然后碰上了第三块，然后就停下了。第二行后面的就被挤到第三行了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
浮动指的是一个元素脱离文档流，悬浮在父元素之上的现象。这篇文章给大家介绍css浮动 float属性的相关知识，感兴趣的朋友一起看看吧2020-02-24
这篇文章主要介绍了html/css中float浮动的用法实例详解,需要的朋友可以参考下2019-09-10
css 布局 之 两端布局的实例代码 （利用父级负的margin）
这篇文章主要介绍了css 布局 之 两端布局 （利用父级负的margin）的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋2020-06-08
这篇文章主要介绍了CCS中的margin：top塌陷问题,本文通过实例截图给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-27
这篇文章主要介绍了css中子元素设置margin-top为什么影响了父元素，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着2019-05-22
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下2018-10-30
CSS 同级元素position:fixed和margin-top共同使用的问题
这篇文章主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-13
这篇文章主要介绍了详解css使既有浮动又有左右margin的多个元素两端对其,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-07
这篇文章主要介绍了CSS中的float和margin的混合使用，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-12
最新评论