零基础学习HTML之CSS篇元素显示模式文档流元素浮动和布局

素显示模式

display : block | none | inline | inline-block

display 属性用来设置元素的显示方式。

block块对象指的是元素显示为一个方块，默认显示状态下，它将占

据整行，其它的元素只能在下一行显示。

inline行间对象与block刚好相反，它允许其它元素在同一行显示。

none隐藏对象

元素的浮动

float : none | left | right

float 属性用来控制元素是否浮动显示。

left向左浮动

right向右浮动

none不浮动

浮动的时候元素的显示属性也变化了变为 "行内元素"

Css 布局

div 标签：

div 与其它标签一样，也是一个XHTML所支持的标签。

div 是XHTML中指定的，专门用于布局设计的容器标签。

在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css.因此我们称这种布局方式为 div + css 布局。

</div>

盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。

对我们来说，只需要理解元素在页面中所占据的位置。

ie6 / ie7 / firefox 的最终宽度 =左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽

文档流

文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，根

据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它

们在网页中的位置。

文档流是浏览器的默认显示规则。

深入浮动

浮动的目的

就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利

用float属性。

1.任何申明为 float 的元素自动被设置为一个"块级元素"。

2.在标准浏览器中浮动元素脱离了文档流，所以浮动元素后的元素会占据浮动元素本来应该

所处的位置。

3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。

4.文字内容会围绕在浮动元素周围。

5.浮动元素只能浮动至左侧或者右侧。

清除浮动

clear : none | left | right | both

none :默认值。允许两边都可以有浮动对象

left :不允许左边有浮动对象

right: 不允许右边有浮动对象

both :不允许有浮动对象

什么要清除浮动？

一开始css的浮动，其本质是用来做一些文字混排效果的，但是后来被我们拿来做布局用，就出现了很多问题。

清除浮动的本质： 为解决父级元素因为子级浮动引起高度为0的问题

我们很多时候不方便给父盒子的高度，因为我们不清除有多少子盒子，有多少内容。经常的做法会让内容撑开父盒子的高度。但是如果父盒子中有子盒子浮动了之后，就会影响到后面的盒子，因为浮动元素脱离了标准流。会把后面还在标准流的盒子覆盖，解决这个问题的方法就要清除浮动

原理图

如何清除浮动？

清除浮动其实叫做 闭合浮动 更合适，因为是把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器 { clear : 属性值 ; }
/*属性值为left,清除左侧浮动的影响
  属性值为right,清除右侧浮动的影响
  属性值为both,同时清除左右两侧浮动的影响*/
复制代码

1. 额外标签法

1.1 末尾标签法

通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标签，结构化比较差，所以不推荐使用。下面三种写法都适用：

<!--写法一：直接用style-->
<div style="clear:both"></div>

<!--写法二：使用clear类-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>

<!--写法三：可以使用br等别的块级元素来清除浮动-->
<style>
.clear { clear:both }
</style>
<br class="clear" />

1.2 内部标签法

把div放进父盒子里，这样盒子会撑开，一般也不会用。

2. overflow

给父级元素添加overflow样式方法。

这种方法代码比较简洁，可以通过触发BFC方式，但是因为本身overflow的本质是 溢出隐藏 的效果，所以有的时候也会有一些问题存在，比如内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。

.father {
      overflow: auto;  
    /* 加上这句话，就可以清除浮动   overflow = hidden|auto|scroll 都可以实现*/
  }
复制代码

3. 伪元素法（最常用）

3.1 使用after伪元素清除浮动

after是在父元素中加一个盒子，这个元素是通过css添加上去的，符合闭合浮动思想，结构语义化正确。父元素中加一个类名为clearfix 。但是这个方法IE6-IE7不识别，要进行兼容，使用zoom:1触发hasLayout来清除浮动

代表网站：百度、淘宝、网易等

.clearfix:after{
    content:".";  /*尽量不要为空，一般写一个点*/
    height:0;     /*盒子高度为0，看不见*/
    display:block;    /*插入伪元素是行内元素，要转化为块级元素*/
    visibility:hidden;      /*content有内容，将元素隐藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7识别 */
}
复制代码

3.2 after伪元素空余字符法

父元素中加一个类名为clearfix，也需要兼容IE6-IE7

在Unicode字符里有一个“零宽度空格”，即U+200B，代替“.”，可以减少代码量，不再使用visibility:hidden
代表网站：阿里巴巴

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}
复制代码

3.3 使用before和after双伪元素清除浮动（推荐）

这种方法完全符合闭合浮动思想。给父元素加一个类名为clearfix,需要兼容IE6-IE7

代表网站：小米、腾讯

 .clearfix:before, .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
复制代码

三种方法总结

©copyright burning.

最后在这里说一下，目前在职web前端开发，如果你现在在学习web前端，在整个前端入门的学习过程当中，有遇见任何关于学习方法，学习路线，学习效率等方面的问题，或者缺乏基础入门的视频教程，前端面试题，学习手册，开发工具，PDF文档书籍教程，都可以随时关注并私信我：前端，系统自动坚持会发送交流圈子，可以来自行获取下载。

作者：顽皮的雪狐七七
链接：https://juejin.cn/post/6901903789197197325
来源：掘金

动是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/1999/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>123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</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 #000;
}
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/1999/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/1999/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: 利用伪元素清除浮动

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商