css 中的浮动使用场景和引发的BUG及解决办法

html-css039

css 中的浮动使用场景和引发的BUG及解决办法,第1张

1、使用场景:

改变元素的排列方式的时候会用到浮动

浮动的元素会脱离文档流,正常的文档流视其而不见

浮动元素的停止:找到父元素的边框停止

浮动元素的卡顿:元素高度大于其他元素;

2、浮动引发的BUG:

1、父元素不设置高度,所有子元素都浮动

2、浮动的子元素撑不开父元素的高度

3、解决办法:

1、给父元素添加overflow: hidden

2、给父元素添加最后一个子元素 clear:both  清除浮动

3、能设置高度的元素都设置高度

4、伪类元素清除

    

目标效果:每一排都要顶部对齐

方法:1、块级元素行内显示:display: inline-block

        2、顶部对齐:vertical-align: text-top

实现步骤:

1、建立基本元素标签,并设置颜色区分, 设置不同高度来模拟你所说的高度不一致的情况

代码:

效果图:

2、换行:使每个li变成行内块级元素,宽度超过ul宽度时会自动换行

代码:

效果图:

3、顶部对齐:其实第二步已经做到了,是默认的顶部对齐,但经测试有时候不会顶部对齐,如:将文字去掉

所以加上一句:vertical-align: text-top更为保险了。

4、完整代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

ul li{ list-style:none }

.myli {

width: 25px

margin-top: 10px

color: #ffffff

vertical-align: text-top

display: inline-block

}

</style>

</head>

<body>

<ul style="width: 100pxmargin: autoborder: #303030 1px solid">

<li class="myli" style="height: 20px background-color: #666"></li>

<li class="myli" style="height: 40px background-color: rgb(17, 233, 186)"></li>

<li class="myli" style="height: 28px background-color: rgb(11, 87, 226)"></li>

<li class="myli" style="height: 60px background-color: rgb(7, 194, 178)"></li>

<li class="myli" style="height: 10px background-color: #303030"></li>

<li class="myli" style="height: 20px background-color: #bcbe23"></li>

<li class="myli" style="height: 40px background-color: #370d85"></li>

<li class="myli" style="height: 20px background-color: #303030"></li>

</ul>

</body>

</html>

最开始就是这样子啦,可是我脑子一热,想让b浮动(工作中确实会遇到这种情况),然后float:left,发现父元素没高度了(看起来就像父元素没了)。

就像这样子:

(其实我最开始是发现给了个border-bottom属性,它跑去顶部了)

这种情况,给父元素一个height值就可以了,可是我不能给它一个固定的高度,我想让它随内容的高度变化。

怎么办呢。

诶,我想到一个办法:

我在父元素最后添加了一个空的元素c,用c清空左右浮动,就又回到最开始的效果了,而且动态添加其他元素的话,父元素高度也会像开始那样随之变化了。