1. 简介
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简介</title>
<style>
/* 在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一 */
div {
width: 600px;
height: 400px;background-color: skyblue;
}
img {
width: 200px;
float: right;
/* margin-right: 0.5em; */
}
.d::first-letter {
font-size: 40px;
float: left;
}
</style>
</head>
<body>
<div>
<img src="../images/touxiang.jpg" alt="" srcset="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea asperiores quis, distinctio iste animi eum. Atque molestiae quibusdam, quidem blanditiis tenetur laudantium minima impedit ipsum voluptates culpa nesciunt quos repellendus, explicabo eligendi velit. Nobis tempora mollitia non debitis quisquam itaque ut expedita voluptas consequatur a quam, odit saepe aut. Quasi, neque eaque. Officia iusto numquam enim obcaecati dolore impedit unde, rerum quibusdam nulla eius, accusamus accusantium repellat eos reiciendis debitis quis. Saepe, veniam harum voluptate dolore ducimus a, nemo quod qui eaque doloremque corporis earum repellat quas suscipit cum quae voluptatibus illo neque libero perspiciatis, pariatur odit aspernatur? Autem, dolores.
</div>
<hr>
<div class="d">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi alias quos at temporibus quidem illum? Dicta, unde. Perferendis expedita inventore doloribus distinctio, eaque magni. Unde iste laudantium maiores recusandae, hic illum consequuntur asperiores ea deleniti odio velit eos! Adipisci doloribus debitis tempora officia magni repellendus. Repudiandae earum quos consequatur dignissimos enim impedit necessitatibus eum vel, corrupti quisquam reiciendis deleniti quidem itaque error numquam qui minima ut animi iusto? Doloremque, cum voluptatibus molestiae eius, soluta nostrum eum beatae aliquid possimus porro perspiciatis sed ut obcaecati a voluptas autem saepe inventore quia nisi. Excepturi commodi similique voluptates, maxime eveniet a vero tempora!
</div>
</body>
</html>2. 元素浮动后的特点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素浮动后的特点</title>
<style>
/*
1.脱离文档流
2.不管浮动前是什么元素，浮动后：默认的宽高是被内容撑开的，而且可以自定义设置
3.不会独占一行，可以与其它元素共用一行
4.不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding
5.不会像行内块一样被当作文本处理（没有行内块的空白问题）
*/
.outer {
width: 800px;
height: 600px;
background-color: gray;
padding: 10px;
}
.box {
font-size: 20px;
padding: 10px;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: orange;
float: left;
/* width: 200px;
height: 200px; */
/* margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px; */
}
.box3 {
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
<div class="box box3">盒子3</div>
</div>
</body>
</html>3. 浮动后的影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>解决浮动后的影响</title>
<style>
/*
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动
*/
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
/* 第一种解决方案：给父元素指定高度 */
/* height: 122px; */
/* 第二种解决方案：给父元素也设置浮动，会带来其他影响 */
/* float: left; */
/* 第三种解决方案：给父元素设置 overflow: hidden */
/* overflow: scroll; */
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1,
.box2,
.box3,
.box4 {
/* 使用clear的前提：本身必须是一个块元素，且本身没有浮动 */
float: left;
}
/* 第四种解决方案：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both */
/* .test {
clear: both;
} */
/* 第五种解决方案：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动（原理与方案四相同） */
.outer::after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="test"></div>
</div>
<!-- <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque enim sed eum quasi nostrum ipsa nulla possimus facilis eos eligendi? Maxime quos eos iste dolore. Magni nulla non, adipisci voluptatum recusandae quibusdam sequi hic, consequuntur distinctio in reprehenderit? Quas voluptatum autem minus quam dolorum nostrum possimus numquam, at totam sed, eius veritatis dolore eos reprehenderit eveniet quis velit perferendis nihil modi molestiae suscipit eum. Nulla magni delectus eius unde illo? Porro delectus numquam assumenda, nulla sed fuga? Eum, eligendi. Ipsum consequatur inventore praesentium, sit rem repellat debitis dolorum perspiciatis aliquam magnam possimus! Obcaecati maiores hic cumque non suscipit, porro itaque odio consequatur, atque sed necessitatibus ipsa. Perferendis doloribus corrupti, alias, atque error qui officia, veritatis asperiores facilis quas labore numquam quidem rem animi perspiciatis. Totam, officia placeat ipsa ipsum consequatur odit aliquid tempore eaque quod tenetur! Delectus id voluptatem accusamus qui iste culpa nisi aperiam, illo asperiores numquam. Perferendis reprehenderit molestias facilis? Earum omnis magnam ducimus non eaque, obcaecati ipsum blanditiis illo alias, assumenda dolorem ipsam, placeat nisi. Architecto aliquam placeat blanditiis provident. Aut autem fugiat inventore, suscipit, ratione cupiditate voluptas omnis cum vitae at nihil dolor. Nesciunt rerum vero assumenda dolor, laborum vel? Deserunt alias corrupti natus impedit quis!</div> -->
</body>
</html>4. 解决浮动后的影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>解决浮动后的影响</title>
<style>
/*
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动
*/
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
/* 第一种解决方案：给父元素指定高度 */
/* height: 122px; */
/* 第二种解决方案：给父元素也设置浮动，会带来其他影响 */
/* float: left; */
/* 第三种解决方案：给父元素设置 overflow: hidden */
/* overflow: scroll; */
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1,
.box2,
.box3,
.box4 {
/* 使用clear的前提：本身必须是一个块元素，且本身没有浮动 */
float: left;
}
/* 第四种解决方案：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both */
/* .test {
clear: both;
} */
/* 第五种解决方案：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动（原理与方案四相同） */
.outer::after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="test"></div>
</div>
<!-- <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque enim sed eum quasi nostrum ipsa nulla possimus facilis eos eligendi? Maxime quos eos iste dolore. Magni nulla non, adipisci voluptatum recusandae quibusdam sequi hic, consequuntur distinctio in reprehenderit? Quas voluptatum autem minus quam dolorum nostrum possimus numquam, at totam sed, eius veritatis dolore eos reprehenderit eveniet quis velit perferendis nihil modi molestiae suscipit eum. Nulla magni delectus eius unde illo? Porro delectus numquam assumenda, nulla sed fuga? Eum, eligendi. Ipsum consequatur inventore praesentium, sit rem repellat debitis dolorum perspiciatis aliquam magnam possimus! Obcaecati maiores hic cumque non suscipit, porro itaque odio consequatur, atque sed necessitatibus ipsa. Perferendis doloribus corrupti, alias, atque error qui officia, veritatis asperiores facilis quas labore numquam quidem rem animi perspiciatis. Totam, officia placeat ipsa ipsum consequatur odit aliquid tempore eaque quod tenetur! Delectus id voluptatem accusamus qui iste culpa nisi aperiam, illo asperiores numquam. Perferendis reprehenderit molestias facilis? Earum omnis magnam ducimus non eaque, obcaecati ipsum blanditiis illo alias, assumenda dolorem ipsam, placeat nisi. Architecto aliquam placeat blanditiis provident. Aut autem fugiat inventore, suscipit, ratione cupiditate voluptas omnis cum vitae at nihil dolor. Nesciunt rerum vero assumenda dolor, laborum vel? Deserunt alias corrupti natus impedit quis!</div> -->
</body>
</html>
评论 (0)