【前端web入门第六天】01 CSS浮动

简介: 这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。

:star:第六天目标

解决布局问题如多个div标签在同一行的问题
简单来说,就是可以两个标签,一个在左边,另一个在右边.

👉相关知识

  • 标准流
  • 浮动
  • flex布局:heavy_exclamation_mark: :heavy_exclamation_mark: :heavy_exclamation_mark:

标准流是先导,浮动和flex布局都可以解决问题,但是浮动在目标开发领域较为落后,主流的解决办法是flex布局

文章目录:


CSS浮动

1.标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则,
例如:块元素独占一行,行内元素可以一行显示多个。

2.浮动

2.1基本使用与布局

作用:让块元素水平排列。
属性名:float
属性值

  • left:左对齐
  • right:右对齐

简单来说,
如果在body中顺序的写下2个div标签,它默认显示的一个在上一个在下
如果此时,给这两个div分别命名类,设置他们的css属性,都加入float:left,他们就都会在左边,挨着显示.
如果一个属性设置float:left;,另一个设置float:right;,他们就会分别显示在左边和右边.

但是如果,一个设置了float,另一个没有设置float,就会引发两个图重叠的问题,
因为浮动的特性是浮动后的盒子脱标,就是不在标准流的范畴内了,没设置float的盒子不知道它的存在.

特点:

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标,不占用标准流的位置

本小节实践:
image.png

分析:

分为两部分,左边蓝色一部分,右边用列表实现8个小部分,这8个小部分整体是一个部分
<!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>浮动-产品布局</title>
  <style>
    * {
    
      margin: 0;
      padding: 0;
    }

    li {
    
      list-style: none;
    }

    .product {
    
      margin: 50px auto;
      width: 1226px;
      height: 628px;
      background-color: pink;
    }

    .left {
    
      float: left;
      width: 234px;
      height: 628px;
      background-color: skyblue;
    }

    .right {
    
      float: right;
      width: 978px;
      height: 628px;
      background-color: brown;
    }

    .right li {
    
      float: left;
      margin-right: 14px;
      margin-bottom: 14px;
      width: 234px;
      height: 300px;
      background-color: orange;
    }

    /* 第四个li和第八个li 去掉右侧的margin */
    .right li:nth-child(4n) {
    
      margin-right: 0;
    }

    /* 细节:如果父级宽度不够,浮动的盒子会掉下来 */
  </style>
</head>
<body>
  <!-- 版心:左右,右面:8个产品 → 8个 li -->
  <div class="product">
    <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>

代码分析:

首先是清除默认样式,包括列表的圆点都要清除
明确部分,左,右两个大部分,右边由8个列表组成

先定义product,在其中放入left和right,right中放列表,注意父级设置和高度和去掉列表多余的margin

2.2 清除浮动

在2.1小节中,如果父级不设置高度,子集设置了浮动,会无法撑开父级的高度(可能导致页面布局错乱)
解决方法:清除浮动(清除浮动带来的影响)

有4种方法可以消除浮动的影响

:large_orange_diamond:方法一:额外标签法

  • 在父元素内容的最后添加一个块级元素,设置CSS属性clear: both
.clearfix{
    clear: both;
 }

 <div class="product">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>

:large_orange_diamond:方法二 单伪元素法
:large_orange_diamond:方法三 双伪元素法

在css中添加代码,如何使用的使用在父类标签中添加这个类

单伪元素法
.clearfix::after{
    content :""
    display : block;
    clear: both;
}

双伪元素法
.clearfix ::before,.clearfix::after{
content:"";
display: table;
}
.clearfix::after{
clear:both;
}


 <div class="product celarfix">
    <div class="left"></div>
    <div class="right"></div>

:large_orange_diamond:方法四 overflow

  • 父元素添加CSS属性overflow: hidden
相关文章
|
18天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
31 3
|
15天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
14天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
24 4
|
19天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
19天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
19天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
20天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
16 2
|
30天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
1月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
53 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
20天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
37 0