浮动与清除浮动
程序员文章站
2022-03-07 18:26:01
...
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}
非常实用的是可以将一个父类盒子中的多个子类盒子在一行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*div{
width: 200px;
height: 200px;
}*/
.one{
width: 200px;
height: 200px;
background-color: blue
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: yellow;
float:left;
}
/*.three{
background-color: green;
}*/
.three{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.father{
width: 600px;
height: 800px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="one">one</div>
<div class="two">two</div>
<span class="three">three</span>
</div>
</body>
</html>
结果如下：
清除浮动用overflow：hidden和clear:both来实现。
推荐阅读
-
PHP中SESSION的注销与清除，phpsession注销_PHP教程
-
jQuery之浮动窗口实现代码(两种方法)_jquery
-
如何做出图中的效果？（块级元素浮动对齐）_html/css_WEB-ITnose
-
dreamweaver cs6怎么给网页添加float浮动效果
-
腾讯文档在线表格怎么插入浮动图片?
-
多个
- 左浮动以后出现的问题，求高手_html/css_WEB-ITnose
-
jQuery实现可拖动的浮动层完整代码
-
为什么说overflow: hidden;能清除浮动呢_html/css_WEB-ITnose
-
可浮动QQ在线客服_javascript技巧
-
html在一个网页上不能显示两个浮动窗口