<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
float: left;
background-color: red;
}
.box1{
width: 300px;
height: 100px;
background-color: deeppink;
}
.box1:before{
content: '嗯哼';
}
.box1:after{/* 在容器的后面添加内容 */
content: '菜鸟联盟';/* 激活伪元素的必要条件 */
color: lawngreen;
font-weight: bold;
}
</style>
</head>
<body>
<a href="#" class="box">aaa</a>
<div class="box1">菜鸟联盟</div>
<!--
普通文档流
普通文档流指的是元素在网页排版的过程中遵循的规则
块级元素从上到下
行内/行内块元素从左到右
float 设置元素浮动
left 元素向父级元素左端浮动
right 元素向父级元素右端浮动
none 默认不浮动
float的注意事项
如果很多浮动元素的宽度之和大于父级盒子那后面的浮动元素会在下一行重新排列
特殊情况
如果浮动元素的高度不一样,那后面的浮动元素会漂浮到能够放下这个元素的位置(图里有东西顶住它它就从那往后)
float对元素的影响
对父级元素的影响 造成父级元素高度坍塌
对浮动元素自身
1可以支持width/height/margin/padding 不支持margin:auto 查看computed面板的display是block
但是实际上是inline-block但不完全是
2生成BFC环境(块级格式化上下文)BFC是一种布局环境
3脱离普通文档流
BFC游戏规则
在同一个BFC内部 相邻盒子在竖直方向上不会出现margin合并(所以float元素不会出现外边距和并)
在计算BFC的高度时 会计算浮动元素的高度(用来清除浮动)
什么属性可以生成BFC环境
display:inline-block
float:left或者float:right
position:absolute或者position:fixed
overflow:hidden
根标签html标签
解决父级元素高度坍塌的几种方法
设置父级的height
生成BFC
清除浮动元素的浮动属性(两种方法其实一个意思,在后边添加一个盒子)
在浮动元素最后面添加一个有clear属性的元素(不常用)
.clearfix{
clear:both;
}
<div class="clearfix"></div>
使用after伪元素模拟元素来清除浮动(企业常规用法)
.box:after{/* after伪元素 */
content:'';
display:block;
clear:both;
}
visibility: hidden;
伪元素默认为display:inline;
行内元素浮动之后和块级元素表现是一致的
文字环绕:两个块级元素
形成原因:文档流和文本流
定位不存在,文档带着文字直接飘起来
-->
</body>
</html>
Python3Turtle