div+css里面左浮动 右浮动 到底是什么意思??

html-css014

div+css里面左浮动 右浮动 到底是什么意思??,第1张

左浮动即float:left,使布局元素靠左浮动。右浮动即float:right,使布局元素靠右浮动。在网页布局中结合这两种布局方式可以设计出千变万化的布局形式!只要发散你的思维,开拓你的想象相信定能设计出好的作品!祝你成功!

如果不采用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>