<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<!--
浮动
网页中有很多布局效果，标准的布局方式没法完成，使用浮动改变元素的默认排列方式
浮动：可以让元素脱离文档流，按照指定的方向进行排列，直至遇到父元素的边界或另一个浮动元素为止
标准文档流：块级盒子垂直排列，行级盒子水平排列
语法
float
取值：left （ 向左浮动）
right （ 向右浮动）
none( 不浮动)
特性：
①可以使块级元素在一排排列
②可以使元素脱离文档流
③可以使元素提升层级
④可以使行级元素设置宽高
浮动带来的问题：
①子元素浮动导致父元素的高度塌陷，会影响后面元素的布局
清除浮动影响的方法：
①给浮动元素的父元素设置固定高度
缺点：不够灵活 优点：代码简洁
②overflow:hidden;(溢出隐藏)
overflow:scroll;(出现横向和纵向滚动条)
overflow:auto;( 自动选择出现的滚动条)
overflow:visible;(默认值)
给父元素添加overflow属性，overflow的值不为visible,其他值都可以尝试解决
优点：代码简洁 缺点：可能会隐藏内容或者触发不需要的滚动条
③额外标签法
在浮动元素的最后面加一个空的块级元素标签，此元素本身不浮动，并且添加样式clear属性
clear取值：left清除左浮动
right清除右浮动
both清除左右浮动
clear作用：清除浮动
缺点：造成代码冗余，影响代码的可读性
④伪元素法 after ( 在元素里面的最后面加一个伪元素)
before （ 在元素里面的最前面加一个伪元素）
是行级元素，属性content，属性值可输入文字，也可以不输入
clearfix:after{
content:""
display:black;
clear:both;
}
优点：内容适应性强，不会在结构上产生冗余代码，可以多次重复使用
0
-->
<!--
图片环绕
实现要点：单列定宽，单列自适应
左侧列固定，左侧浮动，右侧使用margin-left预留位置
-->
</body>
</html>
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
