1. 程式人生 > >文件流、文字流-----浮動

文件流、文字流-----浮動

文件流是相對於盒子模型講的。

文字流是相對於文欄位落講的。

在這裡插入圖片描述

對於文字流參考程式碼:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #cccccc;
float: left; } p { background: #cc0000; }
</style> </head> <body> <div class="box"> </div> <p> 發了瘋的驕傲了放假啊練腹肌奧拉夫驕傲了放假啊了司法局案例書法家阿里放假啊練腹肌奧拉夫驕傲了發了飛機案例附件奧拉夫建安費;案件案發;練腹肌奧拉夫驕傲了放假啊;發發了飛機阿拉;率阿里 發了瘋的驕傲了放假啊練腹肌奧拉夫驕傲了放假啊了司法局案例書法家阿里放假啊練腹肌奧拉夫驕傲了發了飛機案例附件奧拉夫建安費;案件案發;練腹肌奧拉夫驕傲了放假啊;發發了飛機阿拉;率阿里 發了瘋的驕傲了放假啊練腹肌奧拉夫驕傲了放假啊了司法局案例書法家阿里放假啊練腹肌奧拉夫驕傲了發了飛機案例附件奧拉夫建安費;案件案發;練腹肌奧拉夫驕傲了放假啊;發發了飛機阿拉;率阿里 發了瘋的驕傲了放假啊練腹肌奧拉夫驕傲了放假啊了司法局案例書法家阿里放假啊練腹肌奧拉夫驕傲了發了飛機案例附件奧拉夫建安費;案件案發;練腹肌奧拉夫驕傲了放假啊;發發了飛機阿拉;率阿里 </
p
>
</body> </html>

對於文字流效果如下:

在這裡插入圖片描述

對於文件流參考程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #cccccc;
            float
: left; } .box2 { width: 300px; height: 300px; background: #cc0000; }
</style> </head> <body> <div class="box"> </div> <div class="box2"> </div> </body> </html>

對於文件流效果如下:

在這裡插入圖片描述