基础必备之float

作者: 西兰花伟大炮 | 来源:发表于2017-04-27 12:39 被阅读8次

基础必备之float
CSS基础知识之float
python 基础
css基础——float
基础必备之margin
Java面试题
程序员找工作必备 PHP 基础面试题（四）
OC基础数据类型
2018-09-29
初级_OC第一讲基础数据类型和循环语句

特性：float使块元素对外呈现内联元素的特性，对内呈现块元素的特性，浮动元素脱离文档流

（1）文字环绕效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .container{
        margin: 20px auto;
        width: 300px;
        line-height: 1.5;
        font-size: 16px;
        border: 2px dotted limegreen;
    }
    .img-ctr{
        float: left;
        margin: 2px;
    }
    p{
        margin-top: 2px;
    }
    </style>
</head>
<body>
    <div class="container">
        ![](text.jpg)
        <p>翩若惊鸿，宛若游龙，仿佛兮若轻云之蔽月，飘摇兮若流风之回雪</p>
        <p>还似旧时游上苑，车如流水马如龙,这是一首简单的小情歌</p>
        <p>醉后不知天在水，满船清梦压星河</p>
        <p>小楼一夜听春雨，深巷明朝卖杏花</p>
        <p>幸得识君桃花面，从此阡陌多暖春</p>
        <p>疏影横斜水清浅，暗香浮动月黄昏</p>
    </div>
</body>
</html>

float.PNG

给p标签加一个margin-left实现两栏自适应

（2）.clearfix应用在包含浮动子元素的父级元素上

<style>
        .clearfix::after{
            content: '';
            height: 0;
            zoom: 1;
            clear: both;
            display: block;
        }
        .box{
            width: 800px;
            height: auto;
            border: 3px solid orangered;
        }
        .box div{
            width: 150px;
            height: 150px;
            background-color: #888;
            border-radius: 10px;
            float: left;
            margin-right: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
    </div>