码迷,mamicode.com
首页 > Web开发 > 详细

CSS的浮动

时间:2017-07-09 14:50:29      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:没有   tle   utf-8   otto   head   pre   lan   style   bsp   

一、float的目的

  float
         /*浮动 脱离文档流*/

二、语法

  float:left/right;

三、float的特点

1.子级浮动导致父级高度塌陷

2.行内元素设置浮动,会自动转为块级 可设宽高

3.浮动文本类的标记如果没有指定宽度,浮动后会自动折叠到最小宽度(文本)

4.子级浮动始终在父级包含块内部,不会溢出,不会穿越到padding去

5.浮动会影响别的元素

6.如果父级包含块没有足够空间容纳子级浮动元素,子级自动换行

四、清除float

  style="clear:both;" //清除所有浮动

五、示例

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
width: 300px;
height: 100px;
padding-bottom: 20px;
border-bottom:2px solid red;
margin:auto;
}
.l1{
width: 84px;
height: 75px;
background-image: url("1_03.png");
float: left;
}
.l1:nth-child(1){
padding-right: 10px;
border-right: 2px solid red;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li class="l1">123</li>
<li class="l1">213</li>
<li class="l1">321</li>
</ul>
</body>
</html>

CSS的浮动

标签:没有   tle   utf-8   otto   head   pre   lan   style   bsp   

原文地址:http://www.cnblogs.com/hjl-x/p/7141230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!