盒模式-浮动布局

最新推荐文章于 2024-09-11 08:17:43 发布

转载最新推荐文章于 2024-09-11 08:17:43 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaowie/p/9718576.html

本文深入探讨HTML与CSS中的浮动布局概念，讲解如何通过浮动属性实现元素的水平排列，并解决由此产生的文字环绕及布局溢出问题。文章通过具体代码示例，展示了如何使用clear属性清除浮动，保持页面布局的整洁与规范。

文档流：

　　浏览器在页面上摆放HTML元素所用的方法

　　　　块标签的文档流从上到文件的末尾一次拜访

　　　　内联标签从左到右一次摆放，（如果浏览器够大的话）。

浮动布局

　　html--上面有3个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="d-flod">
</div>
<div class="d1">
</div>
<div class="d2">
</div>
</body>
</html>

CSS

.d1,.d2{
    border-width: 10px;
    border-style: solid;
    border-color: rgba(255,0,0,0.75);
    height: 60px;
    margin: 5px 0;
}

.d-flod{
    border:10px dotted blue;
    height:100px;
    width: 100px;
　　float：left；
}

当我们把d-flod css 添加上 float：left；

d-flod好像浮动在d1和d2上面一样。如果我们把d1-d2上加上文字呢？

文字会环绕浮动元素排列。

浮动布局中的和模式计算

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
    <div class="d-parment">
        <div class="d-float">d-float</div>
        <div class="d-float">d-float</div>
        <div class="d-float">d-float</div>
    </div>

</body>
</html>

CSS

.d-float{

    border:10px green dotted;
    margin:10px;
    padding:10px;
    float: left;
}
.d-parment{
    width: 540px;
    height:188px;
    border: 10px solid blue;
}

以上代码没有按照正常块标签显示，而是d-float一次靠左浮动。

如果想要设置上面的图均匀浮动，我们需要在CSS中设置多少的宽和高呢？

精确的计算，有1px的误差第三个浮动元素就被排挤到下一行了。

如果加上文字的话，文字会溢出

如果我们去掉d-float 和d-parmnet的高度也是不行的文字还是会溢出

　　首先我们在需要浮动div下面在创建一个div ，为这个div添加Css样式为清楚浮动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
    <div class="d-parment">
        <div class="d-float">圣诞快乐废旧塑料地方收到了付款就是了的风景撒了地方三闾大夫就死定了房间是的雷锋精神两地分居上的裂缝</div>
        <div class="d-float">收到客户反馈是觉得很烦开始深刻的粉红色大家看法还上课水电开发还上课适当放宽连锁酒店浪费空间死了都快放假</div>
        <div class="d-float">圣诞快乐废旧塑料地方收到了付款就是了的风景撒了地方三闾大夫就死夫就死定了房间是的雷锋精神两地分居上的裂缝</div>
        <div class="clear"></div>
    </div>
</body>
</html>

.d-float{

     border:10px green dotted;
     margin:10px;
     padding:10px;
     float: left;
     width:120px;
    /*height:120px ;取消浮动元素的高度*/

 }
.d-parment{
    width: 540px;
    /*height:180px;  取消掉高度  */
}
/*清除左右浮动*/
.clear{
    clear: both;
}