【代码笔记】Web-CSS-CSS Float(浮动)

一， 效果图。

二，代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS 浮动</title>
    <style>
    img {
        float: right;
    }

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

    .text_line {
        clear: both;
        margin-bottom: 2px;
    }
    </style>
</head>

<body>
    <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</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>
    <h3>Image Gallery</h3>
    <p>Try resizing the window to see what happens when the images does not have enough room.</p>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    <h3>Image Gallery</h3>
    <p>Try resizing the window to see what happens when the images does not have enough room.</p>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    <h3 class="text_line">Second row</h3>
    <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>

</html>

参考资料：《菜鸟教程》