CSS Float（浮动）

一、CSS Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

属性值（"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。）：

二、元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

img

{

    float:right;

}

三、彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

.thumbnail

{

    float:left;

    width:110px;

    height:90px;

    margin:5px;

}

四、清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

.text_line

{

    clear:both;

}

五、示例

（1）示例1：为图像添加边框和边距并浮动到段落的右侧

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS教程</title>

<style>

img

{

    float:right;

    border:1px dotted black;

    margin:0px 0px 15px 20px;

}

</style>

</head>

<body>

<p>

    在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。

我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>

<p>

<img src="logocss.gif" width="95" height="84" />

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

</body>

</html>

效果：

（2）示例2：让标题和图片向右侧浮动

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS教程</title>

<style>

div

{

    float:right;

    width:120px;

    margin:0 0 15px 20px;

    padding:15px;

    border:1px solid black;

    text-align:center;

}

</style>

</head>

<body>

<div>

<img src="logocss.gif" width="95" height="84" /><br>

CSS is fun!

</div>

<p>

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

<p>

    在上面的段落中,div元素是120像素宽,它包含了图像。

    div元素会向右浮动。

    Margins 被添加到div使得文本远离div。

    Borders和padding被添加到div框架的图片和标题中

</p>

</body>

</html>

效果：

（3）示例3：改变样式，让段落的第一个字母浮动到左侧

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS教程</title>

<style>

span

{

    float:left;

    width:1.2em;

    font-size:400%;

    font-family:algerian,courier;

    line-height:80%;

}

</style>

</head>

<body>

<p>

<span>这</span>是一些文本。

这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

这是一些文本。这是一些文本。这是一些文本。

</p>

<p>

在上面的段落中, 第一个字嵌入在span 元素中。

这个 span 元素的宽度是当前字体大小的1.2倍。

这个 span 元素是当前字体的400%(相当大)， line-height 为80%。

文字的字体为"Algerian"。

</p>

</body>

</html>

效果：

（4）示例4：使用 float 创建一个网页页眉、页脚、左边的内容和主要内容

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS教程</title>

<style>

* {

    box-sizing: border-box;

}

body {

    margin: 0;

}

.header {

    background-color: #2196F3;

    color: white;

    text-align: center;

    padding: 15px;

}

.footer {

    background-color: #444;

    color: white;

    padding: 15px;

}

.topmenu {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #777;

}

.topmenu li {

    float: left;

}

.topmenu li a {

    display: inline-block;

    color: white;

    text-align: center;

    padding: 16px;

    text-decoration: none;

}

.topmenu li a:hover {

    background-color: #222;

}

.topmenu li a.active {

    color: white;

    background-color: #4CAF50;

}

.column {

    float: left;

    padding: 15px;

}

.clearfix::after {

    content: "";

    clear: both;

    display: table;

}

.sidemenu {

    width: 25%;

}

.content {

    width: 75%;

}

.sidemenu ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}

.sidemenu li a {

    margin-bottom: 4px;

    display: block;

    padding: 8px;

    background-color: #eee;

    text-decoration: none;

    color: #666;

}

.sidemenu li a:hover {

    background-color: #555;

    color: white;

}

.sidemenu li a.active {

    background-color: #008CBA;

    color: white;

}

</style>

</head>

<body>

<ul class="topmenu">

  <li><a href="#home" class="active">主页</a></li>

  <li><a href="#news">新闻</a></li>

  <li><a href="#contact">联系我们</a></li>

  <li><a href="#about">关于我们</a></li>

</ul>

<div class="clearfix">

  <div class="column sidemenu">

    <ul>

      <li><a href="#flight">The Flight</a></li>

      <li><a href="#city" class="active">The City</a></li>

      <li><a href="#island">The Island</a></li>

      <li><a href="#food">The Food</a></li>

      <li><a href="#people">The People</a></li>

      <li><a href="#history">The History</a></li>

      <li><a href="#oceans">The Oceans</a></li>

    </ul>

  </div>

  <div class="column content">

    <div class="header">

      <h1>The City</h1>

    </div>

    <h1>Chania</h1>

    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>

    <p>You will learn more about responsive web pages in a later chapter.</p>

  </div>

</div>

<div class="footer">

  <p>底部文本</p>

</div>

</body>

</html>

效果：

CSS Float（浮动）的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  3. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  4. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  5. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  6. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  7. css float 浮动

    CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...

  8. CSS：CSS Float(浮动)

    ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...

  9. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

  10. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

随机推荐

  1. Linux中chown和chmod的区别和用法（转）

    chmod修改第一列内容,chown修改第3.4列内容: chown用法: 用来更改某个目录或文件的用户名和用户组. chown 用户名:组名 文件路径(可以是绝对路径也可以是相对路径) 例1:cho ...

  2. js小功能实现

    发送随机数手机验证码60秒倒计时 mm.mobileCheck = function(t){ var mobile = $("#user_mobile").val(); if(&q ...

  3. PHP HTTP协议(报头/状态码/缓存)

    一.HTTP协议介绍 1. #HTTP协议       # (1 建立在TCP/IP协议基础上       # (2 web开发数据传输依赖于http协议       # (3 http 协议全称是文 ...

  4. SQL server 数据库升级版本问题解决办法

    在升级或安装数据库的时候,会遇到数据库版本不对的问题,无论怎么升级,升级提示成功了,但打开数据库发现还是原来那个版本.甚至出现重装数据库之后,登陆页面已经提示安装的是新版本了,但登陆进去之后,发现数据 ...

  5. navicat自动生成DDL语句

    场景:当我们在开发库修改表结构之后,需要把这些表结构的变化同步更新到生产库,这时候可以在Navicat中copy表结构变更的SQL语句. 当你点击了“设计表”进行修改表结构,在保存表结构之前点击“SQ ...

  6. Python全栈day17（文件处理）

    一,文件处理流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 二,文件打开模式 r只读 (默认打开模式是只读) w只写 a追加 三,文件操作实例 1.r读 read读取文 ...

  7. KDevelop使用笔记【中文教程】

    *师从官方文档: https://userbase.kde.org/KDevelop4/Manual/zh-cn https://docs.kde.org/trunk5/en/extragear-kd ...

  8. md5sum检验MD5值

    md5sum命令检验MD5值 md5sum命令用于生成和校验文件的md5值.它会逐位对文件的内容进行校验.是文件的内容,与文件名无关,也就是文件内容相同,其md5值相同.md5值是一个128位的二进制 ...

  9. oracle 归档空间满的解决办法

    问题现象: 通过命令提示符登陆数据库,一般提示“ora-03113:通信通道的文件结尾”错误,查看trace日志,可以看到详细信息.部分摘录如下(橙色部分给出了建议方案): Errors in fil ...

  10. 【转】dd命令详解及利用dd测试磁盘性能

    dd命令详解及利用dd测试磁盘性能   linux下dd命令详解 名称: dd 使用权限: 所有使用者 manpage 定义: convert and copy a file 使用方式: dd [op ...