文章目录

浮动 float
清浮动
- clear
- - after伪类
  - overflow
浮动应用
浮动常见问题
- 块元素同一行放置
- li下方空格去除

浮动 float

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，不浮动
inherit	从父元素继承float属性的值

添加浮动，可以使得块元素横向排列，便于布局。添加浮动之后，不再受到页面布局限制。
元素加了浮动会脱离文档流，按照一个指定的方向移动直到碰到父级的边界或者另一个浮动元素停止

使块元素与内嵌元素等在一行显示，消除块元素存在换行符产生的空隙。
使内嵌元素支持宽高
不设置宽度的时候宽度由内容撑开

<style>       
     div,span {
    
    color:aqua;background:pink;height:100px;width:100px; border:dotted red 1px;float:right;
     }
 <style>
<body>
 <div>fdkl</div>
 <div>fdkl</div>
 <div>fdkl</div>
 <span>123</span>
 <span>123</span>
 <span>123</span>    
</body>

在这里插入图片描述

脱离文档流（文档流：可显示对象在排列时所占用的位置）

  <head>
   <meta charset="utf-8" />
    <title></title>
  <style>
        .box1{
    
    width:200px;height:200px; background:red;float:left;}
        .box2 {
    
    
            width: 400px;
            height: 400px;
            background: blue;
            
        }
        </style>
</head>
<body>  
    <div class="box1">897</div>
    <div class="box2">250</div>

</body>

在这里插入图片描述

提升层级半级（元素分为元素本身与元素内容两部分，前面元素浮动，本元素内容未放置进去叫做半级）

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>        
        .box1{
    
    width:200px;height:200px; background:red;float:left;}
        .box2 {
    
    
            width: 400px;
            height: 400px;
            background: blue;
            color:antiquewhite;
        }
        </style>
</head>
<body> 
    <div class="box1">897</div>
    <div class="box2">250</div>

</body>

可以看到元素二的内容并不是在最左边
在这里插入图片描述

清浮动

子级添加浮动后父级包不住子级

clear

元素的某个方向上不能有浮动元素。

属性值	描述
left	左侧不允许浮动值
right	右侧不允许浮动值
both	左右侧不允许浮动值
none	默认值，允许浮动值
inherit	从父级元素继承clear值

<head>
    <meta charset="utf-8" />
    <title></title>   
    <style>  
        .box1{
    
    width:200px;height:200px; background:red;float:left;}
        .box2 {
    
    
            width: 400px;
            height: 400px;
            background: blue;
            color:antiquewhite; 
            clear:both;
        }
        </style>
</head>
<body>   
    <div class="box1">897</div>
    <div class="box2">250</div>

</body>

在这里插入图片描述
其余清浮动方法
清浮动前：

清浮动后：
在这里插入图片描述

给父级也添加浮动
给父级添加display:inline-block
在浮动元素元素下加<div class="clear"></div> .class{height:0px;font-size:0;clear:both}
在浮动元素下面加<br clear="all"/>(换行符)
给浮动元素的父级添加 { zoom:1;} :after {content:"";display:block;clear:both;} —推荐使用

after伪类

添加在模块后面，格式可不同

<style>
p:after {
    
    
                content:"fffffffffffff"; background:red;
                width:100px;height:100px;
                display:block;
            }
</style>
<body>
    <p>fbsnnfbaknbf</p>  
</body>

在这里插入图片描述

给浮动元素的父级加overflow 并配合zoom:1

overflow

属性值	描述
auto	溢出时显示滚动条
scroll	默认就显示滚动条
hidden	溢出部分隐藏

<style>
       
        .box1 {
    
    
            width: 300px;
            height: 300px;
            border: 1px dashed #000;
            font-size: 12px;
            line-height: 30px;
            overflow:auto;
        }

        h3 {
    
    
            width: 100px;
            height: 30px;
            background: red;
            margin: 0;
        }
    </style>
<body>    
    <div class="box1">
        套接字是通信的基石，是支持TCP/IP协议的路通信的基本操作单元。可以将套接字看作不同主机间的进程进行双间通信的端点，它构成了单个主机内及整个网络间的编程界面。套接字存在于通信域中，通信域是为了处理一般的线程通过套接字通信而引进的一种抽象概念。套接字通常和同一个域中的套接字交换数据(数据交换也可能穿越域的界限，但这时一定要执行某种解释程序)，各种进程使用这个相同的域互相之间用Internet协议簇来进行通信 [3] 。
        Socket(套接字)可以看成是两个网络应用程序进行通信时，各自通信连接中的端点，这是一个逻辑上的概念。它是网络环境中进程间通信的API(应用程序编程接口)，也是可以被命名和寻址的通信端点，使用中的每一个套接字都有其类型和一个与之相连进程。通信时其中一个网络应用程序将要传输的一段信息写入它所在主机的 Socket中，该 Socket通过与网络接口卡(NIC)相连的传输介质将这段信息送到另外一台主机的 Socket中，使对方能够接收到这段信息。 Socket是由IP地址和端口结合的，提供向应用层进程传送数据包的机制 [2] 。
    </div>
    <h3>简介</h3>
    <div class="box1">
        <div style="height:500px; width:300px;background:pink;">00000</div>
    </div>
</body>

在这里插入图片描述

IE6一下高度小于19px的元素，高度会被当做19px处理解决方法：overflow:hidden;
IE6、7下不支持after伪类，但是浮动元素的父级有宽度就不用清浮动

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>        
        .box {
    
    
            width: 300px;
            margin: 0 auto;
            border: dashed 10px pink;
            
        }
        .div {
    
    
            width: 200px;
            height: 200px;
            background: red;
            float: left; 
        }
        p {
    
    width:200px;border:1px solid #000;
        }
            p:after {
    
    
                content:"fffffffffffff"; background:red;
                width:100px;height:100px;
                display:block;
            }
        .clear {
    
    
            zoom:1;
        }
        .class:after {
    
    content:"";display:block;clear:both;
        }
        
     
    </style>
    
    <style>
        /*
            overflow:内容溢出
            auto:溢出时显示滚动条
            scroll 默认就显示滚动条
            hidden 溢出隐藏

        */
        .box1 {
    
    
            width: 300px;
            height: 300px;
            border: 1px dashed #000;
            font-size: 12px;
            line-height: 30px;
            overflow:auto;
        }

        h3 {
    
    
            width: 100px;
            height: 30px;
            background: red;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="box  ">
        <div class="div"></div>
        <!--<br clear="all" />-->
    </div>
   
    <p>fbsnnfbaknbf</p>
    <div class="box1">
        套接字是通信的基石，是支持TCP/IP协议的路通信的基本操作单元。可以将套接字看作不同主机间的进程进行双间通信的端点，它构成了单个主机内及整个网络间的编程界面。套接字存在于通信域中，通信域是为了处理一般的线程通过套接字通信而引进的一种抽象概念。套接字通常和同一个域中的套接字交换数据(数据交换也可能穿越域的界限，但这时一定要执行某种解释程序)，各种进程使用这个相同的域互相之间用Internet协议簇来进行通信 [3] 。
        Socket(套接字)可以看成是两个网络应用程序进行通信时，各自通信连接中的端点，这是一个逻辑上的概念。它是网络环境中进程间通信的API(应用程序编程接口)，也是可以被命名和寻址的通信端点，使用中的每一个套接字都有其类型和一个与之相连进程。通信时其中一个网络应用程序将要传输的一段信息写入它所在主机的 Socket中，该 Socket通过与网络接口卡(NIC)相连的传输介质将这段信息送到另外一台主机的 Socket中，使对方能够接收到这段信息。 Socket是由IP地址和端口结合的，提供向应用层进程传送数据包的机制 [2] 。
    </div>
    <h3>简介</h3>
    <div class="box1">
        <div style="height:500px; width:300px;background:pink;">00000</div>
    </div>
</body>
</html>

浮动应用

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <style>
        body {
    
    
            margin:0;
        }
        .box1 {
    
    
            width: 900px;
            margin: 0 auto;
        }
        .left {
    
     width:300px;float:left;
        }
            .left div {
    
     height:298px;background:#9F0;border:1px solid #fff;
            }
        .center {
    
    
            width: 300px;
            float: left;
        }
        .center div {
    
    
            height: 198px;
            background: #CF0;
            border: 1px solid #fff;
        }
        .right {
    
     width:300px;float:right;
        }
            .right div {
    
    
                height: 298px;
                background: #FF0;
                border: 1px solid #fff;
            }
        </style>
</head>
<body>
    <div class="box1">
        <div class="left">
            <div></div>
            <div></div>
        </div>
        <div class="center">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="right">
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

图示
在这里插入图片描述

浮动常见问题

块元素同一行放置

在IE6、7元素浮动要并在同一行的元素都要加浮动
在IE6下，块元素有浮动和横向的margin时，margin的横向值会被放大成两倍：解决方法：display:inline

<style>
       
        .box {
    
     width:400px;
        }
        .left {
    
     width:100px;height:300px;background :red;float:left;
        }
        .right {
    
    width:300px;float:left;
        }
    </style>
    <body>
    <div class="box">
        <div class="left"></div>  
        <div class="right">
            MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在TCP/IP协议族上，是为硬件性能低下的远程设备以及网络状况糟糕的情况下而设计的发布/订阅型消息协议，为此，它需要一个消息中间件。
            IBM公司的安迪·斯坦福-克拉克及Cirrus Link公司的阿兰·尼普于1999年撰写了该协议的第一个版本。
            该协议的可用性取决于该协议的使用环境。IBM公司在2013年就向结构化资讯标准促进组织提交了 MQTT 3.1 版规范，并附有相关章程，以确保只能对规范进行少量更改。MQTT-SN是针对非 TCP/IP 网络上的嵌入式设备主要协议的变种，与此类似的还有ZigBee协议。
            纵观行业的发展历程，“MQTT”中的“MQ” 是来自于IBM的MQ系列消息队列产品线。然而通常队列本身不需要作为标准功能来支持。
            可选协议包含了高级消息队列协议，面向文本的消息传递协议，互联网工程任务组约束应用协议，可扩展消息与存在协议，数据分发服务，OPC UA以及web 应用程序消息传递协议。 [1]
        </div>
    </div>
    </body>

在这里插入图片描述

li下方空格去除

在IE6、7下li下几个px间隙问题：在IE6、7下li本身没有浮动，但是内容浮动li下就会多出几个px
解决办法：给li加vertical-align:top;

<style>
        /*
        在IE6、7下li下几个px间隙问题：在IE6、7下li本身没有浮动，但是内容浮动li下就会多出几个px
            解决办法：给li加vertical-align:top;
        */
        ul {
    
    margin:0;padding:0;list-style:none;        }
        a {
    
    text-decoration:none;   float:left;     }
        .list {
    
    width:300px;        }
            .list li {
    
    
                height: 30px;
                border: 1px solid #000;
                vertical-align: top;
            }
        span{
    
    float:right}
    </style>
<body>
 <ul class="list">
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
    </ul>
    </body>

在这里插入图片描述

前端基础知识学习——浮动、清浮动（四）

文章目录

浮动 float

清浮动

clear

after伪类

overflow

浮动应用

浮动常见问题

块元素同一行放置

li下方空格去除

猜你喜欢