CSS 浮动(float) 宝妈级教程通俗易懂

标准流

标签按照规定好的默认方式排序
块级元素独占一行 从上向下顺序排列
div hr p h1-h6 ul ol form table

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 300px;
            background-color: #c5708b;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

为什么需要浮动嘞?

很多的布局效果,标准流没有办法完成,就需要利用到浮动完成布局.

浮动可以改变元素标签默认的排列方式

网页布局第一准则:

多个块级元素纵向排列找标准流

多个块级元素横向排列找浮动

⚾ 什么是浮动?⚾

float 属性用于创建浮动框
将其移动到一边,直到左边缘或者右边缘及包含块或者另一个浮动框的边缘

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            /* left 左浮动 right 右浮动 none 不浮动(默认) */
            float: left;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

浮动特性

1.脱离标准普通流的控制移动到指定位置脱标

2.浮动的盒子不再保留原先的位置

3.多个盒子都设置浮动,按照属性值一行并排顶端对齐排列(不会有缝隙,多出另起一行对齐)

4.浮动元素会具有行内块元素特性(任何元素都可浮动)

如果块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动后,大小由内容决定
行内元素同理

5.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

实战小技巧

为了约束浮动元素位置,网页布局一般采用的策略:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

清除浮动

为什么要清除浮动?

由于父级盒子很多情况下,不方便给高度,但是的盒子浮动又不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子.

1.父级没有高度

2.子盒子浮动了

3.影响下面布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid #000;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

清除浮动方法

清除浮动本质:

清除浮动元素脱离标准流造成的影响

清除浮动策略:

闭合浮动,只让浮动在父盒子内影响,不影响父盒子外面的其他盒子

1. 父级添加overflow 属性值设置hidden auto scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

弊端:无法显示溢出的部分

父盒子 500px 子盒子 600px (子盒子的100px被隐藏)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 600px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

2.:after 伪元素法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
        }

        div .child {
            color: bisque;
            width: 240px;
            background-color: #c5708b;
            float: left;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE 6,7专有 解决兼容性问题 */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

3.双伪元素清除浮动

)CSS 标准盒子模型(Box Model)

在网页中所有HTML元素可以看作盒子,在CSS中,"box model"术语是用来设计和布局时使用的;CSS盒模型本质上是一个盒子,封装周围的HTML元素包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性,所以布局时每个元素所占的总宽高是这4个属性的总和;比如宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

1.1Margin(外边距)清除边框外的区域,外边距是透明的

1.2Border(边框)围绕在内边距和内容外的边框

1.3Padding(内边距)清除内容周围的区域,内边距是透明的

1.4Content(内容)盒子里填充的内容比如文本,图像等

标准盒子模型

宽度为100px的div

根据盒子模型得出该元素的总宽度为:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一个宽度为100px的元素,此元素的总宽度必须小于等于100px

2)DIV+CSS布局

Div+CSS布局就是将网页内容用<div>分割为块,之后使用css设置每个块的大小,位置等

DIV+CSS布局最重要的是灵活运用float(浮动)属性,其值:1)left 2)right 3)both

clear属性作用是清除浮动,其值为:1)left 2)right 3)both

d2向右浮动 float:right

因为div是块级元素,如果都没有脱离文档流div就会按照从上到下的顺序放置

d2设置为右浮动其他两个div位置的变化:

1)d1没有脱离文档流会占据一行,所以d2只能浮动到d1下面的右面如上图所示

2)d2脱离文档流,d3自动填充到d2的位置

d1,d2全部设置为右浮动

1)当d1,d2都设置为右浮动时:因为css中d1在d2上面先设置,因此d1在右侧,如果d2在d1上面先设置样式,则d2在右侧,d1在左侧,自己测试不再截图

2)当d1,d2都设置为右浮动时:d3就会跑到上图中d2的位置

3)如果3个div都设置左或右浮动,当3个width加一起<=100%就会在第一行显示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮动,d3设置为右浮动

当d2清除了左浮动,d3设置为右浮动,就会如上图所示;如果d2清除的是右浮动,d2就会在d1上面,d3就会定位在d1下面的右面,自己测试不再截图

当d2清除了左浮动,如果想要d2紧挨着d1(与d1在一行上),可以通过position脱离文档流设置其上下左右属性使其定位在d1右侧,自己测试

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局综合运用position+上下左右属性与float属性为网页进行布局

注意:浏览器的兼容性问题,特别是使用IE内核的浏览器对W3C的规范不怎么遵守

.昨日回顾

CSS的介绍

CSS，Cascading Style Sheets层叠样式表。

一个网页由三个部分：结构、表现、行为，对应的标准是：XHTML、CSS、JavaScript。

这三个标准语言，是浏览器直接可以识别的，并且能直接进行解释(翻译)的。

CSS的格式

一个CSS样式表(<style></style>)由多个CSS规则构成；

一个CSS规则由“选择器”和{}构成；

选择器就是给哪一个HTML元素定义；

CSS选择器

第一：基本选择器（单一）

通用选择器(*)：将匹配所有的HTML元素；
标签选择器：对应所有的HTML标记，名称与标记名称一样。
类选择器：可以通过给一类HTML元素，定义同一个class属性来增加样式。类样式定义以“.”开头定义。CSS的CLASS属性一般给层叠样式用表。比如：

.news表示class=news的元素增加样式
news表示class=news的<div>元素增加样式
.news title表示class=news下的class=title的<div>元素

ID选择器：给标记特定ID属性的HTML元素来增加样式。\

Id选择器的定义，以“#”号开头
网页不能出现同一个ID的值，ID像身份证号，具有唯一性；
HTML元素的ID属性，一般给JavaScript使用

第二：组合选择器

多元素选择器：也就是同时给多个HTML元素定义。

body,p,a,ul,li,p{margin:0px;padding:0px;}
每一个HTML元素都具有默认样式。

后代元素选择器：用空格来分隔各个选择器。

.news .title p{background-color:#FF0000;}

子元素选择器：用>号来分隔父子选择器，不存在第三层级的问题。

第三：伪类选择器

伪类选择器一般是给超链接<a>标记来增加样式。

超链接具有四个状态：

正常状态 a:link{ }

放上状态 a:hover{ }

激活状态a:active{ }

访问过状态 a:visited{ }

全局链接

a:link,a:visited{color:#333;text-decoration:none;}

a:hover{color:#FF0000,text-decoration:underline;}

给链接增加类样式 (class=“a2”)

a.a2:link,a.a2:visited{ }

a.a2:hover{ }

CSS的继承性

CSS内部元素将继承外部元素的样式，多个外层元素的样式就叠加到内层元素上。<body>元素是网页中最大的标记，它中的样式将被其它子元素继承。

哪些CSS属性能被继承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等

引入CSS的方式

（1）内嵌式

通过<style></style>来书写CSS代码。

只能应用于当前网页，不能被其它网页共享。

注意：<style>标记可以放在网页的任何地方，但一般放在<head>。

（2）外联式

通过<link>标记来引入外部的CSS文件(.css)。

可以被其它网页共享。public.css index.css news.css about.css

格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />

注意：<link>标记只能放在<head>中

（3）行内样式

通过style的属性来书写CSS代码。

每一个HTML元素，都有 style、class、id、name、title 属性。

举例：<p style=“font-size:24px;”></p>

CSS的字体/文本属性

Font-size：文字大小

Font-weight：加粗

Font-style：斜体

Color：颜色

Line-height：行高

Text-indent：首行缩进

Text-align：水平对齐

Letter-spacing：字符间距

CSS列表

List-style-type：列表类型，取值：none、circle、 square

List-style-position：符号位置，取值：inside、outside

List-style-image：图片路径，举例：list-style-image:url(images/li01.gif);

2.CSS背景属性

Background-color：背景颜色

Background-image：背景图片，举例：background-image:url(images/bg.gif);

Background-repeat：背景平铺，取值：no-repeat(不平铺)、repeat(平铺)、repeat-x(x方向)、repeat-y(y方向)

Background-position：背景定位，取值：固定值或百分比

格式：background-position:水平方向垂直方向;

用固定值定位：background-position:100px 0px; //距离左边100px，距离上边0px

用百分比定位：background-position:50% 50%; //水平方向居中垂直方向居中

用单词来定位：background-postion:left|center|right top|center|bottom; 三个值取其中一个

Background-attachment：附加信息，取值：scroll(滚动)、fixed(固定)

简写形式：background:url(images/bg.gif) repeat-x 100px 0px; //多个属性值间用“空格”隔开

3.CSS浮动和清除

Float：元素浮动，取值：left或right。

Clear：清除浮动，取值：left或right或both

CSS浮动元素将向左向右浮动；

浮动可以叫“飘”起来；

浮动的元素，直到碰到父元素的边框或前一个浮动元素的边框为止；

浮动元素是一个块元素框，不管它原来是什么元素(行内元素)；

浮动元素不再占用空间，脱离了普通文档流，层级比普通元素的级别高；

清除浮动

清除浮动特性后，清除元素之后的其它元素将恢复默认排版；
清除浮动特性后，包围元素从视觉上看起来，像包围住了浮动元素；

4.CSS边框属性

Border：同时设置四个边框的属性

Border-left：设置左边框的属性

Border-right：设置右边框的属性

Border-top：设置顶边框的属性

Border-bottom：设置底边框的属性

格式：border-bottom：粗细线型线颜色;

举例：border-bottom：2px solid #FF0000; //元素的下边线为2px粗的实线，颜色为红色

线型取值：none(无边线)、solid(实线)、dashed(虚线)、dotted(点状线)、double(双线)

5.“盒子”模型

每一个HTML元素可以看成一个“盒子”。

一个“盒子”具有：宽度、边框、内填充、外边距

宽度(width)和高度(height)：是指内容的宽度和高度，不含边框、外边距、内填充。

内填充(padding)：是指内容到边框线间的距离，含四个方向：上、右、下、左

外边距(margin)：是指边框线以外的距离。

计算一个“盒子”的总空度

假设：总宽度为100px，边框为1px，内填充为10px，求内容的宽度

Width = 100px – 1px*2 -10px*2 = 78px

假设：总宽度为100px，内容的宽50px，求左右内填充分别是多少？

Padding-left = (100px – 50px )/2 = 25px

6.CSS内填充padding

Padding-left：左边线到内容间的距离

Padding-right：右边线到内容间的距离

Padding-top：顶边线到内容间的距离

Padding-bottom：底边线到内容间的距离

Padding：同时设置四个边的内填充距离

padding:10px; //表示：上下左右四个内填充都是10px

padding:5px 10px; //表示：上下为5px，左右为10px

padding:5px 10px 15px; //表示：上为5px，左右为10px，下为15px

padding:5px 10px 15px 20px; //表示：上右下左分别设置不同的内填充，顺序不可乱

7.CSS外边距margin

Margin-left：左边线以外的距离

Margin-right：右边线以外的距离

Margin-top：顶边线以外的距离

Margin-bottom：底边线以外的距离

Margin:10px; //表示：四个外边距都是10px

Margin:10px 15px; //表示：上下外边为10px，左右外边距为15px

Margin:5px 10px 15px //表示：上外边距为5px，左右外边距为10px，下外边距为15px

Margin:5px 10px 15px 20px; //分别设置四外外边距，顺序为“上右下左”

8.综合案例：PHP首页

一、首先要确定的事情

主页的宽度：973px

主页的背景色、背景图片

网页的结构：网页头部、网页尾部、网页主要内容（左右两列）

二、网页结构图

在线咨询

上一篇：Word如何转换为HTML？Word转HTML具体操作步骤
下一篇：HTML超大文件上传和断点续传的实现

您的项目需求

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

整合营销服务商

CSS 浮动(float) 宝妈级教程 通俗易懂

标准流