CSS margin 属性_W3School CSS 参考手册 - 技术文章

CSS 浮动特性详解

浮动是css里面布局用的最多的属性。

一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。

也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。

浮动的性质：脱标、贴边、字围、收缩。

浮动的元素脱标

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
    height: 400px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class=&#;box1&#;></div>
<div class=&#;box2&#;></div>
</body>
</html>

两个元素并排了, 并且两个元素都能够设置宽度、高度了。

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}
</style>
</head>
<body>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。

也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了, 无论它原来是个div还是个span。

浮动的元素互相贴靠

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
body{
    font-size: 60px;
}
.box1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 120px;
    height: 220px;
    background-color: gold;
}
.box3{
    float: left;
    width: 340px;
    height: 300px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class=&#;box1&#;>1</div>
<div class=&#;box2&#;>2</div>
<div class=&#;box3&#;>3</div>
</body>
</html>

浮动的元素有&#;字围&#;效果

<html xmlns=&#;http://www.w3.org//xhtml&#; xml:lang=&#;en&#;>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
div{
float: left;
width: 344px;
height: 516px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<img src=&#;images/1.jpg&#; alt=&#;&#; />
</div>
<p>文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

div挡住了p, 但是p中的文字不会被挡住, 形成&#;字围&#;效果。如果将p标记换成div, 则不会有&#;字围&#;效果。

详细案例见：CSS|实例|图文混排

收缩：一个浮动的元素, 如果没有设置width, 那么将自动收缩为文字的宽度(这点非常像行内元素)。

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
div{
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div>我是文字</div>
</body>
</html>

浮动的清除

实验：现在有两个div, div身上没有任何属性。每个div中都有li, 这些li都是浮动的。

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

我们本以为这些li, 会分为两排, 但是, 第二组中的第1个li, 去贴靠第一组中的最后一个li了。

第二个div中的li, 去贴第一个div中最后一个li的边了。

原因就是因为div没有高度, 不能给自己浮动的孩子们, 一个容器。

清除浮动方法1：给浮动的元素的祖先元素加高度。缺陷: 只限于父元素高度确定的情况下。

如果一个元素要浮动, 那么它的祖先元素一定要有高度。高度的盒子, 才能关住浮动。

解决方法:

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding:0;
}
div{
height: 50px; /* 为父元素设置高度 */
border: 1px solid #;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

清除浮动方法2：clear:both;

网页制作中, 高度height很少出现。为什么? 因为能被内容撑高! 那也就是说, 刚才我们讲解的方法1, 工作中用的很少。

脑弄大开：能不能不写height, 也把浮动清除了呢? 也让浮动之间, 互不影响呢?

clear:both;

clear就是清除, both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

这种方法有一个非常大的、致命的问题, margin失效了。

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class=&#;box1&#;>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class=&#;box2&#;>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

清除浮动方法3：隔墙法

<html xmlns=&#;http://www.w3.org//xhtml&#; xml:lang=&#;en&#;>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class=&#;box1&#;>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div class=&#;cl h8&#;></div>
<div class=&#;box2&#;>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

墙! <div class=&#;cl h18&#;></div>

这个墙, 隔开了两部分浮动, 两部分浮动, 互不影响。

近些年, 有演化出了&#;内墙法&#;：

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class=&#;box1&#;>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
<div class=&#;cl h16&#;></div>
</div>
<div class=&#;box2&#;>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
</html>

内墙法本质-给没有高的父亲撑出高

因为一个父元素不可能被浮动的子元素撑出高度, 解决的方法：内墙法

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果没有清除浮动 , 则父元素的盒子没有高度, <div>盒子只是一条线*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class=&#;cl&#;></div>
</div>
</body>
</html>

清除浮动方法4：overflow:hidden;

overflow就是&#;溢出&#;的意思, hidden就是&#;隐藏&#;的意思。

<html xmlns=&#;http://www.w3.org//xhtml&#; xml:lang=&#;en&#;>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端开发工程师又发现了, 能做偏方。

一个父亲不能被自己浮动的儿子，撑出高度。但是, 只要给父亲加上overflow:hidden; 那么, 父亲就能被儿子撑出高了。这是一个偏方。

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

<html>
<head>
<meta http-equiv=&#;Content-Type&#; content=&#;text/html;charset=UTF-8&#;>
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class=&#;p1&#;></p>
<p class=&#;p2&#;></p>
<p class=&#;p3&#;></p>
</div>
</body>
</html>

浮动清除方法5: 利用伪元素清除浮动

<!DOCTYPE html>
<html lang=&#;en&#;>
<head>
<meta charset=&#;UTF-8&#; />
<title>Document</title>
<style type=&#;text/css&#;>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 800px;
border: 1px solid red;
}
/* 浮动造成的问题
->父元素高度塌陷
*/
.first{
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.last{
width: 300px;
height: 300px;
background-color: green;
float: right;
}
ul:after{
content: &#;&#;;/*你啥都不写但是属性你得有*/
clear: both;
/* 你需要多加一个属性display:block; */
display: block;
}
</style>
</head>
<body>
<ul>
<li class=&#;first&#;>肯定放东西</li>
<li class=&#;last&#;>肯定放东西</li>
<li class=&#;first&#;>肯定放东西</li>
<!-- <div style=&#;clear: both;&#;></div> -->
</ul>
</body>
</html>