- Objective:
- Breadcrumb:
# 概念阐释
## 语义
比较传统的网页布局方式，使页面中的块级元素脱离普通流，向左或向右浮动。
- 浮动元素会脱离普通流，所以浏览器会视它为隐藏
- 并排的盒子，`margin` 会“collapse”
- 垂直的盒子，`margin`会相加
- 如果是`img`或`a`这样的內联元素要使用块级元素包裹它们，或用`display:block`
- 块级元素要定义width 或 height
## 语法
```
p {
float: left;
}
```
属性：
- `left`
- `right`
在一个浮动盒子的周围，其他元素会自动环绕，如果不想环绕，使用`clear`属性
```
div {
clear: left; /*清除这一元素左边*/
}
```
属性：
- `left`
- `right`
- `both`
# 实例
# 相关内容
解决最外层盒子受到浮动影响的办法：
- clearfix
- `overflow:auto`
- `display:flow-root`
# 问题
## 问题1:
复写这个页面，并且在拉伸浏览器的同时字的大小也随之变动。使用`*{boxsizing:border-box}`
## 问题2:
- 复写样式
- 盒子浮动到最右边，如何解决margin never collapse
- 实现4个盒子并排
- 为什么上图背景受影响？修复它
## 问题3:
用`float`实现侧边导航
## 问题4
复写：https://www.htmlandcssbook.com/code-samples/chapter-15/float.html
# 问题答案
- 问题1
- 问题2
- 浮动元素不会collapse垂直方向的margin，为什么盒子1上方有空白，解决办法是margin:0px;
- `p{ float:left }`
- `p{ margin-right:10px;} section{clear:left}`
- 问题3
```html
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="stylesheet.css"> -->
<style>
ul{
background-color:lightblue;
width:150px;
padding:15px;
margin:0px 0px 0px 10px;
float:right;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Contace Us</li>
<li>Blogs</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloribus enim dolore placeat dolorem maxime neque ratione accusantium quibusdam. Reprehenderit velit minus voluptate id mollitia eos expedita quisquam tempore autem!</p>
</body>
</html>
```
# 参考资料
- Coursera｜Web Development 第05章21节：Positioning Elements by Floating