CSS3之浮动

CSS3之浮动

一、浮动

浮动属性让元素脱离文档流（飘起来了），使元素成为不占整宽的块级元素（即内容宽度决定元素宽度）。但由于脱离文档流，浮动元素的正下方可被块级元素使用，但文字不会使用浮动元素下方的空间。

二、学习

1.图文浮动

<meta charset="UTF-8">
<style>
    body{
     
        max-width: 600px;
    }
    img{
     
        float: left;
        margin: .5em;
    }
</style>
<img src="LittleDragon.jpg">
块级元素不浮动，占据母元素整宽。浮动后，有内容决定宽度。
浮动元素的位置不会超过其容器的内容区。

2.浮动容器

浮动元素的位置不会超过其容器的内容区

<style>
    .parent{
     
        border: solid #aaa;
        width: 10em;
        height: 10em;
    }

    .fl,.fr{
     
        width: 2em;
        height: 2em;