float現象（是什么,脫標,排序,貼靠,字圍,高度問題）-有解無憂

1：網頁的布局方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2
        {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;
            margin-right: 100px;
        }
    </style>
</head>
<body>
    <span class="box1"></span>
    <span class="box2"></span>
</body>
</html>

注意一下：

float特點: 1:浮動的元素能讓行內元素設定寬高. 2:記住,浮動的元素能使用內外邊距. 3:浮動中不區分行內/塊級/行內塊級元素的.都可以設定寬高. 4:浮動元素是一種水平排版的東西. 5:浮動跟行內塊級元素很像. 6:float只能水平排版. 缺點: 1:浮動中沒有居中對齊,沒有.只有左對齊右對齊. 2:但是不能使用margin: 0 auto;使用這樣無效. 什么是水平排版? 行內元素/行內塊級元素什么是垂直排版? 塊級元素

效果：

在這里插入圖片描述

2：浮動元素的脫標

代碼示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2
        {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

注意一下.
什么是脫標?
1:如果一個元素設定浮動之后,他就脫離標準流了(脫標).像是浮動起來了.他會蓋住沒浮動的元素.

效果：
在這里插入圖片描述

浮動元素排序規則

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2
        {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
         .box3
        {
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4
        {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>

注意一下:
相同方向上的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面
不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動
難點：
浮動元素浮動之后的位置, 由浮動元素浮動之前在標準流中的位置來確定
什么意思？
如果這個設定浮動的元素在第一行,浮動之后也會在第一行.(只不過是以浮動的形式而已)

效果：

在這里插入圖片描述

浮動元素貼靠現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .father
        {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        .box1
        {
            float: left;
            width: 50px;
            height: 300px;
            background-color: red;
        }
         .box2{
            float: left;
            width: 50px;
            height: 100px;
            background-color: green;
        }
        .box3{
            float: left;
            width: 250px;
            height: 100px;
            background-color: blue;
        }
        /*.box4
        {
            float: left;
            width: 500px;
            height: 500px;
            background-color: black;
        }*/
    </style>
</head>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
</body>
</html>

注意一下：
什么是浮動元素貼靠現象?
1.如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
2.如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元素·開始往前貼靠
3.如果貼靠了前面所有浮動元素之后都不能顯示, 最侄訓貼靠到父元素的左邊或者右邊，

效果：

在這里插入圖片描述

浮動元素字圍現象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>62-浮動元素字圍現象</title>
    <style>
        div{
            float: left;
            width: 100px;
            height: 100px;
            /*background-color: red;*/
            border: 1px solid #000;
        }
        p{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
<!--<div></div>-->
<img src="images/girl.jpg" alt="">
<p>1999年-2002年范冰冰一共出演了《青春出動》、《小李飛刀》、《秦始皇》、《中關村風云》、《少年包青天2》《塵埃落定》等十七部電視劇[12]  ，以及《河東獅吼》等三部電影[13]  ，
    2003年在由梁羽生小說改編的電視劇《萍蹤俠影》中飾演女主角云蕾，同年在馮小剛執導的賀歲檔電影《手機》中飾演女主角武月[14]  ，
    2004年憑借電影《手機》獲得第27屆大眾電影百花獎最佳女主角獎，同時《手機》也獲得大眾電影百花獎最佳故事片獎，[2]  9月，出演根據古龍小說改編的古裝劇《小魚兒與花無缺》，飾演女主角鐵心蘭[15]  ，同年出演《大唐芙蓉園》中的楊玉環等五部電視劇，以及電影《千機變2》和《情癲大圣》[16]  ，
    2005年發行首張個人專輯《剛剛開始》，這張處女大碟由圈內多位音樂人聯袂制作，包含了多種風格迥異的音樂元素，[3]  同年主演由張之亮執導的古裝片《墨攻》，飾演女主角逸悅，[17]
    2006年出演電視劇《封神榜之鳳鳴岐山》，飾演女主角蘇妲己，之后接連拍攝《蘋果》、《導火線》、《心中有鬼》等六部電影[18]  ，
    2007年2月，主演的電影《蘋果》入圍第57屆柏林國際電影節主
    范冰冰
    范冰冰(23張)
    競賽單元，導演李玉，女主演范冰冰，男主演佟大為共同出席本屆電影節，[19]  6月，范冰冰與華誼約滿，自組作業室，投資拍攝民國劇《胭脂雪》，并首次擔當制片人，同時飾演女主角文玉禾[20]  ，10月，憑借電影《蘋果》獲得第四屆歐亞國際電影節最佳女演員獎，[21]  同年出演《合約情人》、《精舞門》、《新宿事件》等五部電影[22]  ，同年憑借電影《心中有鬼》獲得第44屆臺灣電影金馬獎最佳女配角[4]  ，</p>

</body>
</html>

注意一下,
1.什么是浮動元素字圍現象?
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象

效果：

在這里插入圖片描述

浮動元素高度問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>64-浮動元素高度問題</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #000;
        }
        p{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>
    <p></p>
</div>
</body>
</html>

注意一下,
在浮動流中浮動的元素是不可以撐起父元素的高度的

效果：
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/199185.html

標籤：java

上一篇：elementUI學習筆記（一）

下一篇：2020-10-30