CSS Float(浮动)

作者: maskerII | 来源:发表于2019-05-10 22:48 被阅读0次

Test10
清除浮动的几个主要方法
一篇文章带你了解CSS clear both清除浮动
Css中的float和BFC（Block Formatting
CSS Float (浮动)
CSS的浮动属性
css float浮动
css浮动float
css - 浮动(float)
CSS：浮动（float）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Float(浮动)</title>
    <style>
        img.floatright{
            float: right;
        }
        img.floatright2{
            float: right;
            border: 1px dashed #73AD21;
            margin: 0px 5px 15px 20px;
        }

        img.thumnail{
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        }
        div.floatright{
            float: right;
            width: 200px;
            margin: 0 0 15px 20px;
            border: 1px solid black;
            text-align: center;
        }
        span.floatleft{
            float: left;
            width: 1.2em;
            font-size: 400%;
            font-family: Arial, sans-serif;
            line-height: 80%;
        }


        .text_line{
            clear: both;
            margin-bottom: 2px;
        }

        * {
            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>
<h2>Demo1</h2>
<p>在下面的段落中，我们添加了一个<b>float:right</b>的图片，导致图片将会浮动在段落的右边</p>
<p>
    <img class="floatright" src="http://www.runoob.com/images/logo.png" alt="LOGO" width="336" height="69">
    这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，
    这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，
    这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，
    这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本，这是一些文本。
</p>

<h2>Demo2 图片库</h2>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="http://www.runoob.com/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="http://www.runoob.com/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="http://www.runoob.com/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis4_small.jpg" width="120" height="90">



<h2>Demo3 clean</h2>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="http://www.runoob.com/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis2_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis3_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis4_small.jpg" width="107" height="90">
<p class="text_line">第二行</p>
<img class="thumbnail" src="http://www.runoob.com/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis2_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis3_small.jpg" width="107" height="90">
<img class="thumbnail" src="http://www.runoob.com/images/klematis4_small.jpg" width="107" height="90">


<h2>Demo4 为图像添加边框和边距并浮动到段落的右侧</h2>
<p>
     在下面的段落中，图像将向右浮动。图像有个虚线边框
     图像的外边距为上0px 右5px 下15px 左20px，使得文本远离图像
</p>

<p>
    <img class="floatright2" src="http://www.runoob.com/images/klematis4_small.jpg" alt="csslogo" 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
    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>

<h2>Demo5 标题和图片向右浮动</h2>
<div class="floatright">
    <img src="http://www.runoob.com/images/klematis4_small.jpg" 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 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>

<h2>Demo6 让段落的第一个字母浮动到左侧</h2>
<p>
    <span class="floatleft">这</span>是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</p>

<p>
    在上面的段落中, 第一个字嵌入在span 元素中。
    这个 span 元素的宽度是当前字体大小的1.2倍。
    这个 span 元素是当前字体的400%(相当大)， line-height 为80%。
    文字的字体为"Alial"。
</p>


<h2>Demo7 创建一个没有表格的网页</h2>
<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（浮动）？


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

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


-->

<!--

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

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

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

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

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

实例
img
{
    float:right;
}

-->

<!--

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

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

实例
.thumbnail
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}


-->

<!--


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

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

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

实例
.text_line
{
    clear:both;
}

-->


<!--

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

属性  描述  值
clear   指定不允许元素周围有浮动元素。
left
right
both
none
inherit


float   指定一个盒子（元素）是否可以浮动。
left
right
none
inherit


-->

Test10
引用文章：那些年我们一起清除过的浮动 CSS浮动float详解 Clear Float CSS float浮动的...
清除浮动的几个主要方法
浮动：float，常用的css属性，可以设置左浮动float：left；右浮动float：right；不浮动flo...
一篇文章带你了解CSS clear both清除浮动
一、前言 CSS clear both清除产生浮动，使用了css float浮动会产生css浮动，这个时候就需要...
Css中的float和BFC（Block Formatting
css中的float（浮动）：在css中浮动的作用可让元素脱离文档流，从而达到某种布局效果 float：left...
CSS Float (浮动)
CSS浮动float 参考教程（经验分享：CSS浮动(float,clear)通俗讲解）首先了解一下标准文档流的...
CSS的浮动属性
CSS浮动和清除浮动 1.浮动float div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。...
css float浮动
上线上述布局的实现方法，屏幕宽度为750rpx，设置外边距20rpx，设置圆角，动态计算标签宽度，通过float属...
css浮动float
一，浮动的特性 0, 两个概念：a, 常规流(就是文档流。默认布局，上到下左到右). b, 包含块(离元素最近...
css - 浮动(float)
在网页开发过程中，为了让块元素能在统一行上面显示，可以使用inline-block进行布局。还有没有其他的方式呢？...
CSS：浮动（float）
1. 浮动（float）目标理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮...