<!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>