<!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; } 伪元素默认为display:inline; --> </body> </html>
