显示和浮动是在CSS页面布局中运用比较多的两个属性。
1.display（显示）与visibility（可见性）
display和visibility都是定义一个元素显示的属性，display属性设置一个元素应该如何显示，而visibility属性指定一个元素是否可见。
display属性：
display属性可以用来更改内联元素和块元素，可以使页面以一种特定的方式进行组合。
- 块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
- 内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
display属性主要有四种值：
- display:block—显示为块级元素
- display:inline—显示为内联元素
- display:inline-block—显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。
- display:none—隐藏元素
<style>
li{display:inline;}
span {display:block;}
</style>
visibility属性：
visibility属性通常其值被设置成visible或hidden，visibility：hidden相当于display:none,能把元素隐藏起来，但两者之间的区别在于：
- display:none元素不再占用空间。
- visibility：hidden使元素在网页上不可见，但仍占用空间。
2.float（浮动）
float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列，该属性一般用于图像或布局中。
浮动方式：
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素会围绕它，浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它的左边。
<head>
<meta charset="utf-8">
<title>Float(浮动)</title>
<style>
img{
float: right;
}
</style>
</head>
<body>
<p>
<img src="girl.jpg">
浮动内容浮动内容浮动内容浮动内容浮动内容浮动内容</p>
</body>
清除浮动：
清除浮动使用clear属性，元素浮动之后，周围的元素会重新排列，为了避免这种情况，需要使用clear属性，clear属性指定元素两侧不能出现浮动元素。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
