浮动是CSS布局的最佳利器,我们可以通过浮动来灵活地定位页面元素,以达到布局网页的目的。
在图片样式的文字环绕中已经了解了float,float属性取值只有2个,分别是left个right。
浮动布局
将四个
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浮动布局title>
<style type="text/css">
.king{
width: 400px;
background-color: #FFFFFF;
border: 1px solid black;
}
.king div{
padding:10px;
margin: 15px;
border: 2px solid red;
background-color: #FFFFFF;
color: royalblue;
float: left;
}
style>
<body>
<div class="king">
<div class="one">刘德华div>
<div class="two">张学友div>
<div class="three">郭富城div>
<div class="four">黎明div>
div>
body>
html>
在正常文档流的情况下,块元素都是独占一行的。如果要让两个或者多个块元素并排在同一行,可以考虑使用浮动,将块元素脱离正常文档流来实现。
清除浮动
浮动会影响周围元素,并且还会引发很多预想不到的问题。可以使用clear属性来清除浮动带来的影响。
clear属性取值如下表
属性值 | 说明 |
left | 清除左浮动 |
right | 清除右浮动 |
both | 同时清除左浮动和右浮动 |
一般都是在浮动元素后面再增加一个空元素,然后为这个空元素定义“clear:both”来清除浮动。在实际开发中,凡是用了浮动之后发现有不对劲的地方,首先应该检查有没有清除浮动。
本节主要学习了浮动布局,最后对其总结。
浮动布局:float
清除浮动:clear