零基础学习CSS(18)——float、clear

原创

Dragon水魅 2021-11-08 14:39:57 ©著作权

文章标签 css 前端 html html5 fish 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者Dragon水魅的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 float 可以使子元素浮动到父元素的左 / 右侧：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>实现多列布局</title>
<style type="text/css">
div.left {
width: 50%;
background-color: pink;
float: left;
        }

div.right {
width: 50%;
background-color: lightblue;
float: right;
        }
</style>
</head>

<body>
<div class="left">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse nulla molestiae eum, mollitia dolor
        repudiandae nobis ullam vero ipsum provident inventore reprehenderit. Molestiae cumque soluta tempore minus ad
        inventore dolore?</div>
<div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</div>
</body>

</html>

另一种实现方法，使用 width:50% 设置：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>实现多列布局</title>
<style type="text/css">
div.left {
width: 50%;
background-color: pink;
display: inline-block;
        }

div.right {
width: 50%;
background-color: lightblue;
display: inline-block;
        }
</style>
</head>

<body>
<div class="left">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse nulla molestiae eum, mollitia dolor
        repudiandae nobis ullam vero ipsum provident inventore reprehenderit. Molestiae cumque soluta tempore minus ad
        inventore dolore?</div><div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</div>
</body>

</html>

**解释：**这是因为在代码中的上下换行，会被解析为一个空格。当两个宽度都能容在一行中（类似于 width: 48% ），自然没问题。当我们设置为 50% 后，这个空格就会将第二个元素撑到下一行。

零基础学习CSS(18)——float、clear_fish

float 最开始的用法：围绕文字的浮动

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float正八经的用法：围绕图片的文字浮动</title>
<style type="text/css">
img {
width: 200px;
float: left;
        }
</style>
</head>

<body>
<img src="cjk.jpg" alt="cjk">
<div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis
        alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</div>
</body>

</html>

零基础学习CSS(18)——float、clear_css_02

零基础学习CSS(18)——float、clear_前端_03

浮动元素会脱离正常的文档流：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float会脱离正常的文档流</title>
<style type="text/css">
div.pink {
background-color: pink;
width: 100px;
height: 100px;
        }

div.lightblue {
background-color: lightblue;
width: 200px;
height: 100px;
float: left;  /* 浮动亮蓝色，会覆盖掉玉米丝色*/
        }

div.cornsilk {
background-color: cornsilk;
width: 300px;
height: 100px;
        }

div.seagreen {
background-color: seagreen;
width: 400px;
height: 100px;
        }
</style>
</head>

<body>
<div class="pink"></div>
<div class="lightblue"></div>
<div class="cornsilk"></div>
<div class="seagreen"></div>
</body>

</html>

零基础学习CSS(18)——float、clear_html_04

如果你往 div 中添加文字，文字会环绕 div ，而不会去覆盖，从而实现文字环绕：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float会脱离正常的文档流</title>
<style type="text/css">
div.pink {
background-color: pink;
width: 100px;
height: 100px;
        }

div.lightblue {
background-color: lightblue;
width: 200px;
height: 100px;
float: left;
        }

div.cornsilk {
background-color: cornsilk;
width: 300px;
height: 100px;
        }

div.seagreen {
background-color: seagreen;
width: 400px;
height: 100px;
        }
</style>
</head>

<body>
<div class="pink"></div>
<div class="lightblue"></div>
<div class="cornsilk">文字会环绕cornsilk，不会覆盖前面的lightblue</div>
<div class="seagreen"></div>
</body>

</html>

零基础学习CSS(18)——float、clear_前端_05

总结：浮动元素对于文本和行内元素，采取的是“被环绕”，而对于块级元素，采取的是“覆盖”。

float允许修改元素的显示样式：

零基础学习CSS(18)——float、clear_前端_06

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float会改变显示样式</title>
<style type="text/css">
span {
width: 200px;
margin: 100px;
padding: 20px;
background-color: pink;
border: 5px solid lightblue;
float: left;
        }
</style>
</head>

<body>
<!-- span为行内元素，无法设置width和margin，float后就可以设置 -->
<span>>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</span>
</body>

</html>

零基础学习CSS(18)——float、clear_html_07

float 实现多列布局：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float会改变显示样式</title>
<style type="text/css">
div.left {
background-color: pink;
width: 50%;
float: left;
        }

div.right {
background-color: lightblue;
width: 50%;
float: right;
        }
</style>
</head>

<body>
<h1>两列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis
            itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis
            obcaecati
            adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati,
            illo
            ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>
</body>

</html>

零基础学习CSS(18)——float、clear_html_08

默认情况下的宽度都是元素内容的宽度。若要加上 paddding，这样就使宽度超过整体父元素的 50%，就变成了两行。如果设置 box-sizing 属性值为 border-box，那么宽度就包含到边框的位置：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float会改变显示样式</title>
<style type="text/css">
div.left {
background-color: pink;
width: 50%;
float: left;
padding: 20px;
box-sizing: border-box;
        }

div.right {
background-color: lightblue;
width: 50%;
float: right;
padding: 20px;
box-sizing: border-box;
        }
</style>
</head>

<body>
<h1>两列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis
            itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis
            obcaecati adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis
            obcaecati,illoex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>
</body>

</html>

零基础学习CSS(18)——float、clear_html_09

三列布局样式：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float会改变显示样式</title>
<style type="text/css">
div.left {
background-color: pink;
width: 33.33%;
float: left;
padding: 20px;
box-sizing: border-box;
        }

div.middle {
background-color: cornsilk;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
        }

div.right {
background-color: lightblue;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
        }
</style>
</head>

<body>
<h1>三列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
</div>
<div class="middle">
<h2>中间列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati,
            illo ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>
</body>

</html>

零基础学习CSS(18)——float、clear_html5_10

利用 clear 清除浮动，使得 footer 归位：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>float会改变显示样式</title>
<style type="text/css">
div.left {
background-color: pink;
width: 33.33%;
float: left;
padding: 20px;
box-sizing: border-box;
        }

div.middle {
background-color: cornsilk;
width: 33.33%;
float: left;
padding: 20px;
box-sizing: border-box;
        }

div.right {
background-color: lightblue;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
        }
footer {
clear: left;
        }
</style>
</head>

<body>
<h1>三列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
</div>
<div class="middle">
<h2>中间列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint
            animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati,
            illo ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>
<footer>
<p>Posted by: 鱼C工作室</p>
<p>Contact information: <a href="mailto:someone@example.com">fishc_service@126.com</a>.</p>
</footer>
</body>

</html>

零基础学习CSS(18)——float、clear_css_11

未 clear 的结果：中间文本较长，footer 浮动于其旁边：

零基础学习CSS(18)——float、clear_html5_12

上文的 lightblue 覆盖 cornsilk，使用 clear 使浮动到此为止：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>cornsilk的浮动到此为止</title>
<style type="text/css">
div.pink {
background-color: pink;
width: 100px;
height: 100px;
        }

div.lightblue {
background-color: lightblue;
width: 200px;
height: 100px;
float: left;
        }

div.cornsilk {
background-color: cornsilk;
width: 300px;
height: 100px;
clear: both;
        }

div.seagreen {
background-color: seagreen;
width: 400px;
height: 100px;
        }
</style>
</head>

<body>
<div class="pink"></div>
<div class="lightblue"></div>
<div class="cornsilk">cornsilk的浮动到此为止</div>
<div class="seagreen"></div>
</body>

</html>