CSS浮动基础详解

作者：快乐的kang918_863 | 来源：互联网 | 2023-09-16 18:11

一、浮动每个元素单独占据浏览器的一整块。块级元素按照标准流向下依次排列。实验一，仅一个div设置浮动（左）代码如下:<!DOCTYPEht

一、浮动
每个元素单独占据浏览器的一整块。
块级元素按照标准流向下依次排列。
实验一，仅一个div设置浮动（左）代码如下:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
<style type=text/css>
body{
 margin:15px;
 }
.father{
 background-color:#FF6;
 border:1px solid #F6C;
 padding:5px;
}
.father div{
 padding:10px;
 margin:15px;
 border:1px solid #0FF;
 background-color:#36C;
}

.father p{
 border:1px solid #0FC;
 background-color:#C66;
 }

.son1{
 }
.son2{}

.son3{}
style>
head>

<body>
<div class="father">

    <div class="son1">box1div>
    <div class="son2">box2div>
    <div class="son3">box3 div>
    <p>《Javascript框架设计》是一本全面讲解Javascript框架设计的图书，详细地讲解了设计框架需要具备的知识，主要包括的内容为：框架与库、Javascript框架分类、Javascript框架的主要功能、种子模块、模块加载系统、语言模块、浏览器嗅探与特征侦测、样式的支持侦测、类工厂、Javascript对类的支撑、选择器引擎、浏览器内置的寻找元素的方法、节点模块、一些有趣的元素节点、数据缓存系统、样式模块、个别样式的特殊处理、属性模块、jQuery的属性系统、事件系统、异步处理、Javascript异步处理的前景、数据交互模块、一个完整的Ajax实现、动画引擎、API的设计、插件化、当前主流MVVM框架介绍、监控数组与子模板等。p>
div>
body>
html>

这样没有经过css浮动修饰，父div下的子div按照文档流的方式顺序排列：效果如图：

列表内容
现在我们设置box1向左浮动：

.son1{
 float:left;
}

这里我们对第一个盒子设置浮动，既当对box1设置向左浮动后，box1 就脱离了文档流，她的宽度不再伸展到最右端，而是以能够容纳她的内容的最小宽度显示。box2 占据了原来box1的位置，就好像box1不存在一样，但是box2 的文字并不是顶头写，因为是受到浮动盒子的影响。注意：box2 的最左端是在box1原来的顶头位置，仅仅是文字被box1顶到了后面。因此虽然div之间设置了margin:15px，但是看到文字”box1”和”box2”直接没有间距，由此可证明，仅仅是文字被挤了过去。

这里写图片描述

实验二：将box1 和box2都设置浮动：
修改代码：

.son1{
 float:left;}

.son2{
 float:left;}

效果如图：
这里写图片描述
可以看出这次box1和box2中间有了间距，应为他们设置的margin：15PX，设置浮动后，margin是叠加的，因此他们之间的间距为30px。同样字“box3”仅仅是被挤到了后面。

实验三：将box3也设置浮动：

.son3{
 float:left;}

效果如图：
这里写图片描述
这时，原来的

段落应为前三个div都脱离了文本流，就占据原来box1所在的位置，从头开始。其文字由于受浮动的影响，围绕浮动的盒子进行排列。

实验四：将box3向右浮动：

.son3{
 float:right;}

效果如图：
这里写图片描述

试验五：使用clear属性清除浮动影响：
未清除前：
这里写图片描述
文字围绕所有浮动的box分布。

给

段落加了clear属性，clear：left ，清除左边浮动盒子对文字排版的影响；清除后如图：
这里写图片描述
如果想清除左右盒子对文字的影响可以设置：

clear:both;

实验六：扩展盒子的高度
一个容器所容纳的盒子都是浮动的盒子时，当一个浮动盒子的高度高于容器时，容器不能自动扩展，这里我们把文字段落去掉，查看一下效果。对于解决这种问题的方法当然也是用clear属性，只不过需要一个单独的空的div作为清除浮动的盒子。
body中的代码去掉文字段落后如下：

<body>
<div class="father">

    <div class="son1">box1div>
    <div class="son2">box2div>
    <div class="son3">box3<br>
    box3<br>
    box3 <br>
    div>
 div>
 body>

效果如图：
这里写图片描述

添加空div ，设置class属性为clear，设置class为clear的css：

.father .clear{
 padding:0;
 margin:0;
 border:0;
 clear:both;

}

添加空div，class=“clear”

<div class="father">
    <div class="son1">box1div>
    <div class="son2">box2div>
    <div class="son3">box3

    box3

    box3 

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