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

html-css025

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

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

CSS中li设置左浮动后,li下面的a控制位置方式为:

li a{margin-left:20pxmargin-top:12pxdisplay:blockwidth:20px}

详情:

a标签写样式时要加display:block属性,

这样a标签就显示一行了。

一个li下面有多个a标签的话,就得给他们定宽度,

必要的情况下就float:left。

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