css浮动之float属性的用法笔记

原创 PHP笔记  2017-03-28 18:16  阅读 1,060 views 次

css中,float属性定义了元素的浮动,float会使元素向左或向右浮动,直到它的外边缘碰到另一个元素或父元素的边缘。元素浮动之后,周围的元素会围绕它重新排列,浮动元素之前的元素将不会受到影响。

float属性值

  • none:不浮动
  • left:左浮动
  • right:右浮动

实例:

......
<body>
<style type="text/css">
div{width:150px;height:50px;float:left;border:1px solid red;margin:5px;}
</style>
<div>浮动示例1</div>
<div>浮动示例2</div>
<div>浮动示例3</div>
<p>我是一个段落</p>
</body>
......

运行结果:

 

清除浮动(clear)

clear属性可以规定元素两侧不能出现浮动元素。

格式:

clear:both;

实例:

......
<body>
<style type="text/css">
div{width:150px;height:50px;float:left;border:1px solid red;margin:5px;}
p{clear:both;}
</style>
<div>浮动示例1</div>
<div>浮动示例2</div>
<p>我是一个段落</p>
<div>浮动示例3</div>
</body>
......

运行结果:

如果不使用clear会出现以下效果:

本文地址:https://www.ggbiji.com/css-float.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情