三, clear 属性清除浮动定位
clear 属性(清除浮动)clear 还可以用以解决高度塌陷问题
全部清除浮动 both 清除对当前元素影响最大的浮动元素(不允许出现向左浮动也不允许出现向右浮动的情况, 所以盒子会单独占据一行.)
单侧清除浮动 left 清除左侧浮动对元素的影响; right 清除右侧浮动对元素的影响;(清除, 并不是把浮动元素去掉, 而是它的左侧或右侧不会有浮动元素, 所以意味着要另起一行来显示了)
默认值 none 不清除.
实例:
设置三个 div 盒子分别为 1,2,3, 当为三个盒子都设置向左浮动时, 排成水平一行.
1, 为盒子 2 设置 clear:left 时, 可以发现 2 盒子左侧没有了浮动定位盒子, 从而另起一行, 盒子 3 也会另起一行尽量向左浮动.
1.2 为盒子 3 设置 clear:left 时, 3 盒子左侧没有浮动.
2, 为盒子 2 设置 clear:right, 盒子 2 文档流元素, 所以被盒子 1 遮住, 盒子 3 另起一行.
3, 为盒子 2 设置清除两侧浮动 clear:both 时, 清除左右浮动的影响.
4, 更加准确的来说 both 是清除影响最大的浮动, 盒子 1 和 3 的宽高均为 100px, 盒子 2 的宽高为 200px, 盒子 1,2 分别进行左右浮动, 盒子 3 设置 clear:both, 效果如下:
四, 浮动定位的应用
(一)通过设置浮动定位来实现文字环绕图片效果
注意: 浮动的元素不会盖住元素, 文字会自动环绕在浮动元素的周围, 所以我们可以通过浮动设置文字环绕图片效果.
代码
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 浮动定位
- </title>
- <style>
- *{ margin:0; padding:0 } #box1{ width: 100px; height: 100px; background-color:
- #bfa; /* 浮动的元素不会盖住元素, 文字会自动环绕在浮动元素的周围, 所以我们可以通过浮动设置文字环绕图片效果.*/ float:left;
- } .p1{ height: 200px; background-color: yellow; }
- </style>
- </head>
- <body>
- <div id="box1">
- <img width="100px" height="100px" src="t1.jpg" alt="图片">
- </div>
- <p class="p1">
- 1978 年, 16 岁的彭丽媛从郓城来到济南, 在山东五七艺术学校 (1978 年底改为山东艺术学院) 中专部读书, 进入山东艺术学院学习,
- 彭丽媛真正走上了艺术之路. 自 1978 年起, 彭丽媛拜在王音璇教授门下潜心学习了近 3 年, 在这段时间里, 彭丽媛不仅汲取了演唱的专业营养,
- 也逐步走出了山东, 走向了全国. [3-4] 1980 年, 彭丽媛代表山东济宁艺术学校到北京参加文艺汇演, 凭借北京文艺汇演上的优秀表现,
- 国家派彭丽媛出访了欧洲六国演出; [5] 同年, 彭丽媛被招入济南军区前卫歌舞团, 成为军队的一名文艺战士, 后考入中国音乐学院声乐系攻读大专,
- 大学本科, 以及硕士研究生.
- </p>
- </body>
- </HTML>
实现效果
(二)利用浮动定位进行页面布局
1, 四行三列布局
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 四行三列
- </title>
- <style>
- *{ padding:0; margin:0; } body{ font-size:30px; } #container{ width:1000px;
- height:500px; margin:auto; } .header{ width:1000px; height:100px; background:
- #f775a9; margin-bottom: 5px; } .nav{ width: 1000px; height:50px; background:
- #8fdbd8; margin-bottom: 5px; } .content{ width:1000px; height: 600px; margin-bottom:5px;
- } .asider{ width: 200px; height:600px; float:left; margin-right:5px; background:#b8dea4;
- } .main{ width:590px; height:600px; float:left; margin-right: 5px; background:#10b48e;
- } .asider2{ width:200px; height:600px; float: left; background: #ace4cb;
- } .footer{ width: 1000px; height:100px; background: #79e0c3; margin-bottom:
- 50px; }
- </style>
- </head>
- <body>
- <div id="container">
- <div class="box header">
- header
- </div>
- <div class="nav">
- nav
- </div>
- <div class="box content">
- <div class="asider">
- asider
- </div>
- <div class="main">
- main
- </div>
- <div class="asider2">
- asider2
- </div>
- </div>
- <div class="box footer">
- footer
- </div>
- </div>
- </body>
- </HTML>
使用浮动定位进行页面布局的时候, 不可滥用浮动.
(三)使段落首字母浮动于左侧
来源: http://www.bubuko.com/infodetail-3163474.html