网站导航
> 文档中心 > CSS浮动

CSS浮动

网友: 文档中心 2022-05-10 15:46:26

文章目录

  • 1. 结构伪类选择器
  • 2. 伪元素
  • 3. 标准流
  • 4. 浮动
  • 5. 清除浮动
    • 5.1 直接设置父元素高度
    • 5.2 额外标签法
    • 5.3 单伪元素清除法
    • 5.4 双伪元素清除法
    • 5.5 给父元素设置overflow
  • 6. 案例代码

1. 结构伪类选择器

  • 作用： 根据元素在HTML中的结构关系查找元素
  • 优势： 减少对于HTML中类的依赖，有利于保持代码整洁
  • 场景： 常用于查找某父级选择器中的子元素
选择器 说明
E:first-child {} 匹配父元素中第一个子元素，并且是E元素
E:last-child {} 匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n) {} 匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) {} 匹配父元素中倒数第n个子元素，并且是E元素
  • 注意点：
    1. n为：0、1、2、3、4、5…
    2. 通过n可以组成常见公式
功能 公式
偶数 2n、even
奇数 2n+1、2n-1、odd
找到前5个 -n+5
找到从第5个往后 n+5

2. 伪元素

  • 伪元素： 一般页面中的非主体内容可以使用伪元素
  • 区别： 元素——HTML设置的标签；伪元素——CSS模拟出的标签效果
伪元素 作用
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素
  • 注意点： 必须设置content属性才能生效；伪元素默认是行内元素

3. 标准流

  • 又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
  • 常见标准流排版规则：
    1. 块级元素：从上往下，垂直布局，独占一行
    2. 行内元素、行内块元素：从左往右，水平布局，空间不够自动折行

4. 浮动

  • 作用： 早期——图文环绕；现状——网页布局
  • 代码： float:left / right
  • 特点：
    1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
    2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
    3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
    4. 浮动元素有特殊的显示效果：一行可以显示多个；可以设置宽高
    5. 注意点： 浮动元素不能通过text-align:center或者margin:0 auto设置居中

5. 清除浮动

5.1 直接设置父元素高度

  • 优点： 简单方便
  • 缺点： 有些布局中不能固定父元素高度

5.2 额外标签法

  • 操作： 在父元素内容的最后添加一个块级元素，给添加的块级元素设置 clear:both
  • 缺点： 会在页面中添加额外的标签，会让页面的HTML结构变得复杂

5.3 单伪元素清除法

  • 操作： 用伪元素替代了额外标签
.clearfix::after {content:'';display:block;clear:both;/* 补充代码，浏览器兼容性 */height:0;visibility:hidden;}
  • 优点： 项目中使用，直接给标签加类即可清除浮动

5.4 双伪元素清除法

  • 操作：
/* 解决外边距塌陷的问题*/.clearfix::before,.clearfix::after {    content: '';    display: table;}/* 真正清除浮动的标签 */.clearfix::after{    clear: both;}
  • 优点： 项目中使用，直接给标签加类即可清除浮动

5.5 给父元素设置overflow

  • 操作： 直接给父元素设置overflow：hidden
  • 优点： 方便

6. 案例代码

<!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>    <style> *{     margin: 0;     padding: 0; } .box{     margin: 0 auto;     width: 1000px;     height: 600px;     /* background-color: antiquewhite; */ } .left{     float: left;     width: 180px;     height: 600px;     background-color: aquamarine; } .right{     float: right;     width: 800px;     height: 600px;     /* background-color: lightblue; */ } ul{     list-style: none; } .right li{     float: left;     margin-right: 20px;     margin-bottom: 20px;     width: 185px;     height: 290px;     background-color: paleturquoise; }   /* 父级宽度不够,子集自动换行 */ .right li:nth-child(4n){     margin-right: 0; } /* CSS书写顺序:     1.浮动 / display     2.盒子模型:margin border padding 宽高 背景色     3.文字样式 */    </style></head><body>    <div class="box"> <div class="left"></div> <div class="right">     <ul>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>     </ul> </div>    </div></body></html>
<!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>    <style> * {     margin: 0;     padding: 0; } .nav{     margin: 50px auto;     width: 640px;     height: 50px; } ul{     list-style: none; } .nav li{     float: left; } .nav li a{     display: inline-block;     width: 80px;     height: 50px;     background-color: lightpink;     text-align: center;     line-height: 50px;     color: aliceblue;     text-decoration: none; } .nav li a:hover{     background-color: deeppink; }    </style></head><body>    <div class="nav"> <ul>     <li><a href="#">新闻1</a></li>     <li><a href="#">新闻2</a></li>     <li><a href="#">新闻3</a></li>     <li><a href="#">新闻4</a></li>     <li><a href="#">新闻5</a></li>     <li><a href="#">新闻6</a></li>     <li><a href="#">新闻7</a></li>     <li><a href="#">新闻8</a></li> </ul>    </div> </body></html>
网络标签：

相关问题