css基礎-float浮動

時間 2019-12-30

標籤 css 基礎 float 浮動欄目 CSS 简体版

原文原文鏈接

float實現文字環繞圖片效果：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        body{
            font-family: '微軟雅黑';
        }
        .per{
            width: 400px;
            border: 1px solid #CCC;
            padding: 5px;

        }
        .red{
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px;
            float:left;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="red"></div>層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。 [1] 
CSS 可以對網頁中元素位置的排版進行像素級精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
    </div>
</body>
</html>

清除浮動的方法一：html

在浮動元素後面使用一個空元素css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .container{
            width:500px;
            border:1px solid #000;
        }
        .div{
            width: 100px;
            height:100px;
            float:left;
        }
        .div1{
            background-color:red;
        }
        .div2{
            background-color:yellow;
        }
        .div3{
            background-color:green;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

清除浮動的方法二：字體

給容器添加overflow:hidden;spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .container{
            width:500px;
            border:1px solid #000;
            overflow: hidden;
        }
        .div{
            width: 100px;
            height:100px;
            float:left;
        }
        .div1{
            background-color:red;
        }
        .div2{
            background-color:yellow;
        }
        .div3{
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
    </div>
</body>
</html>

清除浮動的方法三：code

css3的:after僞元素htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .container{
            width:500px;
            border:1px solid #000;
            overflow: hidden;
            zoom:1;
        }
        .div{
            width: 100px;
            height:100px;
            float:left;
        }
        .div1{
            background-color:red;
        }
        .div2{
            background-color:yellow;
        }
        .div3{
            background-color:green;
        }
        .clearfix:after{
            content:'.';
            display: block;
            height:0;
            visibility: hidden;
            clear:both;
        }
        .clearfix{
            zoom:1;/*兼容ie6/7*/
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="div div1"></div>
        <div class="div div2"></div>
        <div class="div div3"></div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。