CSS的定位机制

1.普通流（标准流）

默认状态，元素自动从左往右，从上往下排列

块元素的特征：

独占一行
可以设置宽高
如果不设置宽度，宽度默认为容器的100%
常见的块元素：div p h1-h6 ul ol li dl dt d

行内元素的特征：

与其他元素同行显示
不可以设置宽和高
宽和高就是文字或图片的宽高
常见的行内元素：span a b i u em

2.浮动

浮动基础

会使元素向左或向右移动，只能左右，不能上下
浮动元素碰到包含框或另一个浮动框，浮动停止
浮动元素之后的元素将围绕它，之前的不受影响
浮动元素会脱离标准流

基本语法： float:left|right|none

例：下列代码

<!DOCTYPE HTML>

<html>

<head>

    <title>测试页面</title>

    <style>

        .container{

            width:200px;

            height:600px;

            border:2px solid #333;

        }

        .box1{

            background-color: red;

            width:50px;

            height:40px;

        }

        .box2{

            background-color: lightblue;

            width:50px;

            height:40px;

        }

        .box3{

            background-color: pink;

            width:50px;

            height:40px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

    </div>

</body>

</html>

给box1添加浮动

float:left;

可见，box2不见了，这是因为，给box1加了左浮动，它就脱离了文档流，致使box2跑到原来box1的位置，被box1挡住

将box1的float改为右浮动，效果如下图

现在，同时给3个Box设置左浮动

.box1{

            background-color: red;

            width:50px;

            height:40px;

            float:left;

        }

        .box2{

            background-color: lightblue;

            width:50px;

            height:40px;

            float:left;

        }

        .box3{

            background-color: pink;

            width:50px;

            height:40px;

            float:left;

        }

效果如下

实现了横向展示的效果，原理是：设置了浮动的box会去找其父级元素的边，而后面两个也设置了浮动，但是遇到前面浮动的盒子而停止浮动

同时设置右浮动

使用浮动后产生的问题：高度塌陷

例如：设置父容器container为高度自适应，并且让Box1左浮动

.container{

            width:200px;

            /*height:600px;*/

            border:2px solid #333;

        }

        .box1{

            background-color: red;

            width:50px;

            height:40px;

            float:left;

        }

        .box2{

            background-color: lightblue;

            width:50px;

            height:40px;

            /*float:right;*/

        }

        .box3{

            background-color: pink;

            width:50px;

            height:40px;

            /*float:right;*/

        }

可见，因为Box1脱离了容器，因此容器高度只有两个Box撑起来，所以父容器只有两个盒子的高度

现在，给三个盒子都设置左浮动：

可见，container高度已经没有了，出现了高度塌陷，浮动溢出的问题

在container外面下部再添加一个盒子

<!DOCTYPE HTML>

<html>

<head>

    <title>测试页面</title>

    <style>

        .container{

            width:200px;

            /*height:600px;*/

            border:2px solid #333;

        }

        .box1{

            background-color: red;

            width:50px;

            height:40px;

            float:left;

        }

        .box2{

            background-color: lightblue;

            width:50px;

            height:40px;

            float:left;

        }

        .box3{

            background-color: pink;

            width:50px;

            height:40px;

            float:left;

        }

        .box4{

            background-color: green;

            width:200px;

            height:400px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

    </div>

    <div class="box4">box4</div>

</body>

</html>

可见，新添加的盒子挤到上面去了，和上面的内容产生重叠

如何清除浮动？

语法： clear:none|left|right|both;

设置了float的元素会影响其他相邻元素，需要使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响

例：

原效果

给box1添加清除左浮动，没有任何变化，这是因为clear只对自己产生效果，box1左边本身就没有其他元素

給box1清除左浮动

可以看到，box2和box3掉下来了，给Box2清除浮动对Box3没有影响，只是因为box3的左边元素时Box2，所以box3才跟着Box2一起掉下来

清除浮动的常用方法

A.在浮动元素后使用一个空元素

.clear{

　　clear:both;

}

原效果：

清除浮动

<!DOCTYPE HTML>

<html>

<head>

    <title>测试页面</title>

    <style>

        .container{

            width:200px;

            border:2px solid #333;

        }

        .box1{

            background-color: red;

            width:50px;

            height:40px;

            float:left;

        }

        .box2{

            background-color: lightblue;

            width:50px;

            height:40px;

            float:left;

        }

        .box3{

            background-color: pink;

            width:50px;

            height:40px;

            float:left;

        }

        .box4{

            background-color: green;

            width:200px;

            height:400px;

        }

        .clearfix:after{

            content:".";

            display: block;

            height:0;

            visibility: hidden;

        }

        .clear{*zoom:1;/*触发hasLayout兼容IE6、7*/}

        .clear{

            clear:both;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

        <div class="clear"></div>

    </div>

    <div class="box4">box4</div>

</body>

</html>

B.给浮动元素的容器添加 overflow:hidden

*zoom:1;/*触发hasLayout兼容IE6、7*/

例如：

.container{

            width:200px;

            border:2px solid #333;

            overflow: hidden

        }

C:使用CSS3的:after伪元素

.clearfix:after{

            content:".";

            display: block;

            height:;

            visibility: hidden;

            clear:both;

        }

.clearfix{*zoom:;/*触发hasLayout兼容IE6、7*/}

例如：

.container:after{

            content:".";

            display: block;

            height:;

            visibility: hidden;

            clear:both;

        }

.cintainer{*zoom:;/*触发hasLayout兼容IE6、7*/}

清除浮动的其他方法

A.父级元素定义height，只适合高度固定的布局

B.父级元素也一起浮动，不推荐，会产生其他浮动问题

3.绝对定位

参见下一篇文章

CSS定位机制：浮动 float及清除浮动的常用方法的更多相关文章

css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
彻底理解浮动float CSS浮动详解清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
CSS——浮动及应用&清除浮动
浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为文档流 , 字面翻译普通流或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆 ...
浮动float、浮动影响和清除浮动
普通流(normal flow) 这个单词很多人翻译为文档流 , 字面翻译普通流或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS ...
CSS定位机制
CSS中,存在3种定位机制:标准文档流(Normal flow) * 特点:从上到下,从左导游,输出文档内容 * 由块级元素和行级元素组成浮动(Floats) * 能够实现横向多列布局 * 设置了浮 ...
CSS定位机制总结
1,CSS 有三种基本的定位机制:普通流.浮动和绝对定位.除非专门指定,否则所有框都在普通流中定位.2,普通流定位:块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来.行内框在 ...
CSS定位机制之浮动定位float
一.浮动定位实现的效果二.使用float实现浮动定位三.使用clear属性清除浮动定位四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
CSS中浮动属性float及清除浮动
1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...

随机推荐

一小时入门 Python
因为需求, 需要用到py, 所以来学学py, 因为有java基础一小时入门py语法是不成问题的, 但是仅仅入门基础语法而已, 不涉及算法,不涉及大数据,机器学习,人工智能, 但是py这么火爆,就在于 ...
Ubuntu hadoop配置之修改主机名
1.查看主机名的方法方法1: 在终端输入hostname 方法2: 提示符 liuhongyang@ubuntu:~$ liuhongyang:用户名 ubuntu: 主机名 ~: ...
Go操作etcd
etcd是近几年比较火热的一个开源的.分布式的键值对数据存储系统,提供共享配置.服务的注册和发现,本文主要介绍etcd的安装和使用. etcd etcd介绍 etcd是使用Go语言开发的一个开源的.高 ...
谈谈你对HTML语义化的理解。
1.什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(h1-h6),列表(li),强调(strong em)等. 根据内容的语义化(内容结构化),选择合适的标签(代码语义化),便于开发者 ...
linux 假死分析
所谓假死,就是能ping通,但是ssh不上去:任何其他操作也都没反应,包括上面部署的apache也打不开页面. 作为一个多任务操作系统,要把系统忙死,忙到ssh都连不上去,也不是那么容易的.尤其是现在 ...
Android开发中常用Dialog(普通弹窗&时间选择器&日历选择器)
引言开发中,我们会有很多地方使用 Dialog 来展示一些提示信息或设置信息.如:用户提示.进度展示.时间设置.日期设置等. 下面我和大家一些学习下Android中常用的几种Dialog吧~ * 首 ...
词义消除歧义NLP项目实验
词义消除歧义NLP项目实验本项目主要使用https://github.com/alvations/pywsd 中的pywsd库来实现词义消除歧义目前,该库一部分已经移植到了nltk中,为了获得更好 ...
MySQL之增删改查之
MySQL之增删改查前言:以下是MySQL最基本的增删改查语句,很多IT工作者都必须要会的命令,也是IT行业面试最常考的知识点,由于是入门级基础命令,所有所有操作都建立在单表上,未涉及多表操作. ...
IT修养-基础篇
1.科学基础成为开发人员的过程不尽相同,有的是科班出身,有的是兴趣爱好,还有的是专业机构的培训,在这个过程中,可能全面或者零散甚至没有学习过计算机基础学科,但无论是哪一种,想要成为更高层次的开发人员 ...
提交第一个spark作业到集群运行
写在前面接触spark有一段时间了,但是一直都没有真正意义上的在集群上面跑自己编写的代码.今天在本地使用scala编写一个简单的WordCount程序.然后,打包提交到集群上面跑一下... 在本地使 ...

CSS定位机制：浮动 float及清除浮动的常用方法