float浮動以及案例演示_ZenDei技術網路在線

float浮動以及案例演示

-Advertisement-

浮動元素會影響後邊的元素，但不會影響前邊的元素清除浮動：方法一：在浮動元素後面添加一個空元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ ...

浮動元素會影響後邊的元素，但不會影響前邊的元素

清除浮動：

方法一：在浮動元素後面添加一個空元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background:#abcdef;
            float:left;
            border:1px solid;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="clear"></div>
    <div class="last">
        last~
    </div>
</body>
</html>

方法二：

給浮動元素的父元素添加overflow:hidden;

再添加zoom:1; 相容IE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background:#abcdef;
            float:left;
            border:1px solid;
        }
        .wrap{
            overflow: hidden;
            zoom:1;    
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="last">
        last~
    </div>
</body>
</html>

方法三：

使用css3的:after偽元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix{
            zoom:1;/*相容IE*/
        }
        .clearfix:after{
            content:'';
            display: block;
            height:0;
            visibility: hidden;
            clear:both;
        }
        .box{
            width:100px;
            height:100px;
            background:#abcdef;
            float:left;
            border:1px solid;
        }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="last">
        last~
    </div>
</body>
</html>

float完成導航案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*重置樣式*/
        *{margin:0;padding:0;}
        a{text-decoration: none;}
        ul{list-style:none;}
        /*基本樣式*/
        .header{
            width:1120px;
            background:#ccc;
            margin:0 auto;
            overflow: hidden;
            zoom:1;
            padding:0 40px;
        }
        .logo{
            float:left;
            width:100px;
            height:68px;
        }
        .nav{
            float:right;
            overflow: hidden;
            zoom:1;
        }
        .nav li{
            float: left;
            margin-right:20px;
            
        }
        .nav li a{
            color:#333;
            display: block;
            height:68px;
            line-height:68px;
        }
        .nav li a:hover{
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="#"><img src="cat-little.jpg" alt="logo"></a>
        </div>
        <ul class="nav">
            <li><a href="#">導航1</a></li>
            <li><a href="#">導航2</a></li>
            <li><a href="#">導航3</a></li>
            <li><a href="#">導航4</a></li>
            <li><a href="#">導航5</a></li>
        </ul>

    </div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

EF--EntityState相互轉換

EF對數據做什麼樣的操作，是根據EF的上下文實體狀態決定，實體狀態有以下5種狀態，下麵我們就分別看下這5種狀態數據準備，我們看到學生表裡有20000名學生記錄，最後1位學生的學生編號為0000020000 1、Detached--實體跟上下文壓根沒關係我們看到我新創建了名學生，學號為000002 ...
「Flink」配置使用Flink調試WebUI

很多時候，我們在IDE中編寫Flink代碼，我們希望能夠查看到Web UI，從而來瞭解Flink程式的運行情況。按照以下步驟操作即可，親測有效。1、添加Maven依賴<dependency> <groupId>org.apache.flink</groupId> <artifactId>flink- ...
「Flink」使用Managed Keyed State實現計數視窗功能

先上代碼：public class WordCountKeyedState { public static void main(String[] args) throws Exception { StreamExecutionEnvironment env = StreamExecutionEnvi ...
「Flink」Flink的狀態管理與容錯

在Flink中的每個函數和運算符都是有狀態的。在處理過程中可以用狀態來存儲數據，這樣可以利用狀態來構建複雜操作。為了讓狀態容錯，Flink需要設置checkpoint狀態。Flink程式是通過checkpoint來保證容錯，通過checkpoint機制，Flink可恢復作業的狀態和計算位置。chec ...
「Flink」使用Java lambda表達式實現Flink WordCount

本篇我們將使用Java語言來實現Flink的單詞統計。代碼開發環境準備導入Flink 1.9 pom依賴<dependencies> <dependency> <groupId>org.apache.flink</groupId> <artifactId>flink-java</artifactId ...
Android Gradle報錯 (Error:No such property: GradleVersion for class: JetGradlePlugin) 的原因與解決

Error:No such property: GradleVersion for class: JetGradlePlugin 錯誤原因：IDE 版本（GradlePlugin）和 Gradle 版本不匹配導致這個錯誤。 GradlePlugin 版本和 AndroidStudio 版本一致，與 ...
position定位及實際應用

position: static; 靜態定位 / 常規定位 / 自然定位忽略top/right/bottom/left/z-index的影響，使元素回到自然流中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl ...
2019年度前端知識點總結

本文旨在整理和記錄 2019年度從事前端工作的過程中遇到的問題以及解決問題的思路。內容偏新手且敘述不深，整理的目的是為了方便以後快速查閱之前遇到過的問題。 ...