如果不采用float，不妨考虑Flex布局
这几种布局都可以简单实现，换行的话也是一行代码即可，如下图
以下是一个简单的flex布局：
<!--思路：让原本每个子div都占据一行的变成五个一共占一行，在不使用float的情况下，使用flex去实现--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.content{ display:-webkit-flex display:flex} /*Flex布局*/
/*注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
</style>
<body>
<!--设置若干个div，content下的div在flex 的作用下，都会往左浮动-->
<div class="content"> <!--设置类名-->
<div>1</div><!--设置5个div-->
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
因为float的使用原理
浮动元素会生成一个块级框，float是将生成的块级框，在一行上从左向右罗列，假如在一行之上剩余的空间比要浮动的元素的宽度窄，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
你的写法生成的页面如下图：
跟是左浮动还是右浮动没有关系。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）