WILL SHEK

　　

CSS浮动

Jun 27, 2017

CSS浮动

TODO 后续在这里补充例子

浮动初探

先看这段代码：

<!DOCTYPE html>
<html>

<head>
    <title>浮动demo 02</title>
    <style type="text/css">
    #picture {
        float: left;
        width: 160px;
        height: 210px;
        background-color: red;
        margin: 20px;
        border: 5px solid #33ff33;
    }
    
    #quote {
        background-color: lightgray;
        width: 500px;
        height: 300px;
        float: none;
    }
    </style>
</head>

<body>
    <h2>浮动的图片</h2>
    <div id="picture">
        <img src="http://zh.html.net/tutorials/css/bill.jpg">
    </div>
    <div id="quote">
        <p>Hello everybody, I'm Bill Gates</p>
        <p>The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency.</p>
        <p>Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important. </p>
    </div>
</body>

</html>

效果展示如下：

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

一个float为none的元素的margin不是以浮动元素为参考的！但是该元素被浮动元素覆盖后其子元素就会参考这个浮动元素的margin了！靠！ 好拗口！
发现body的默认margin是8px
浮动的第一个问题

浮动的参考文章： CSS浮动float详解

所有文章