DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
width: 600px;
height: 200px;
background-color: red;
float: left;
}
.box2 {
width: 600px;
height: 200px;
background-color: yellow;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: green;
float: right;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
body>
html>
如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素
浮动的元素不会超他上边的兄弟元素,最多最多一边齐
float: left;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.p1 {
height: 200px;
background-color: yellow;
}
style>
head>
<body>
<div class="box1">div>
<p class="p1">
在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。
这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地〖目夹〗着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花上。
我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,胡蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。
枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼〖目夹〗眼;直刺着天空中圆满的月亮,使月亮窘得发白。
鬼〖目夹〗眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地〖目夹〗着许多蛊惑的眼睛。
哇的一声,夜游的恶鸟飞过了
p>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
background-color: #bfa;
/* float: left; */
}
.s1 {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
style>
head>
<body>
<div class="box1">adiv>
<span class="s1">hellospan>
body>
html>
float: left;
.s1 {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
/*为box1设置一个边框*/
border: 10px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
/*为子元素设置向左浮动*/
float: left;
}
.box3 {
height: 100px;
background-color: yellow;
}
style>
head>
<body>
<div class="box1">
<div class="box2">div>
div>
<div class="box3">div>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
border: 10px red solid;
zoom: 1;
overflow: hidden;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3 {
height: 100px;
background-color: yellow;
}
style>
head>
<body>
<div class="box1">
<div class="box2">adiv>
div>
<div class="box3">div>
body>
html>
推荐方式:将 overflow 设置为 hidden 是副作用最小的开启 BFC 的作用。
zoom: 1;
overflow: hidden;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
/*
* 设置box1向左浮动
*/
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
* 由于受到box1浮动的影响,box2整体向上移动了200px
*/
/*清除box1对当前元素对box2产生的影响*/
/* clear: left; */
float: right;
}
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
style>
head>
<body>
<div class="box1">div>
<div class="bxo2">div>
<div class="box3">div>
body>
html>
我们有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用 clear 来完成功能
可选值:
清除对他影响最大的那个元素的浮动
清除浮动以后,元素会回到其他浮动之前的位置
float: right;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
border: 1px solid red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clear {
clear: both;
}
style>
head>
<body>
<div class="box1">
<div class="box2">div>
<div class="clear">div>
div>
body>
html>
使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构
.clear {
clear: both;
}
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
border: 1px solid red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clearfix:after {
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*
* 在IE6中不支持after伪类
* 所以在IE6中还需要使用hasLayout来处理
*/
.clearfix {
zoom: 1;
}
style>
head>
<body>
<div class="box1 clearfix">
<div class="box2">div>
div>
body>
html>
.clearfix:after {
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
}
.box3 {
border: 10px red solid;
}
.box4 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1;
}
style>
head>
<body>
<div class="box3 clearfix">
<div class="box4">div>
div>
<div class="box1 clearfix">
<div class="box2">div>
div>
body>
html>
.box1::before {
content: "";
/*
* display: table可以将一个元素设置为表格显示
*/
display: table;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}