#yyds干货盘点# 前端歌谣的刷题之路-第十八题-清除浮动

简介: #yyds干货盘点# 前端歌谣的刷题之路-第十八题-清除浮动

题目

请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动,且清除类为"wrap"的父级div元素内部的浮动。

image.png

核心代码

<!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 type="text/css">.wrap {
      height: 100px;
      /*补全代码*/
      clear: both;
    }
    .left {
      width: 100px;
      height: 100px;
      float: left;
      /*补全代码*/
    }
    .right {
      width: 100px;
      height: 100px;
      float: left;
      /*补全代码*/</style>
</head>
<body>
  <!-- 请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动,且清除类为"wrap"的父级div元素内部的浮动。 -->
  <div class='wrap'>
    <div class='left'></div>
    <div class='right'></div>
  </div>
</body>
</html>


总结

清除浮动有多种解决方法 本次值提供一种解决方法 伪类使用常识浮动最优方法之一

相关文章
|
9月前
|
前端开发
前端清除浮动的几种方法?及优缺点?
前端清除浮动的几种方法?及优缺点?
66 0
|
9月前
|
前端开发 API
歌谣学前端之react三个api之一续集
歌谣学前端之react三个api之一续集
41 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
80 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
51 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
99 0
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
83 0
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
|
前端开发 JavaScript
#yyds干货盘点 歌谣学前端之React中虚拟dom
#yyds干货盘点 歌谣学前端之React中虚拟dom
131 1
|
前端开发
#yyds干货盘点 歌谣学前端之React中渲染列表
#yyds干货盘点 歌谣学前端之React中渲染列表
83 1
#yyds干货盘点 歌谣学前端之React中渲染列表
|
2天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
4天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
39 1