<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>浮动(float)布局效果</title>
? ? <style>
? ? ? ? ?*{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? }
? ? ? ? /*.box1{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .box2{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: aqua;
? ? ? ? ? ? float: left;
? ? ? ? ? ? float:right;
? ? ? ? } */
? ? ? ? .product{
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? width: 1226px;
? ? ? ? ? ? height: 628px;
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? ? ? li{
? ? ? ? ? ? list-style: none; ?
? ? ? ? }
? ? ? ? /* 两个盒子一左一右 */
? ? ? ? .left{
? ? ? ? ? ? width:234px;
? ? ? ? ? ? height: 628px;
? ? ? ? ? ? background-color: skyblue;
? ? ? ? ? ? float: left;
? ? ? ? }
? ? ? ? .right{
? ? ? ? ? ? width: 978px;
? ? ? ? ? ? height: 628px;
? ? ? ? ? ? background-color: brown;
? ? ? ? ? ? float: right;
? ? ? ? }
? ? ? ? .right li {
? ? ? ? ? ? width: 234px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: orange;
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin-bottom: 14px;
? ? ? ? ? ? margin-right: 14px;
? ? ? ? }
? ? ? ? /* 找到第四个li和第八个li去掉右侧的margin */
? ? ? ? .right li:nth-child(4n){
? ? ? ? ? ? margin-right:0px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <!-- 浮动本质的作用是实习图文混排的效果 -->
? ?
? ? <!-- 标准流
? ? 标准流也叫文档流，指的是标签在页面默认的排布规则，例如：块级元素独占一行，行内元素可以一行显示多个
? ? -->
? ? <!-- 浮动
? ? 作用：让块级元素水平排列
? ? 特点：顶对齐，具备行内块显示模式特点
? ? 属性名：float
? ? 属性值：
? ? left：左对齐
? ? right：右对齐
? ? 注意：加了浮动属性的盒子，会脱标（不会占有标准流的位置）
? ? -->
? ? <!-- <div class="box1">box1</div>
? ? <div class="box2">box2</div> -->
? ? <!-- 产品布局
? ? 版心：左右，右面：8个产品相当于 8个li标签
? ? 细节：如果父级宽度不够，浮动的盒子会掉出父级区域
? ? -->
? ? <!-- 清除浮动
? ? 场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能会导致页面布局混乱）
? ? 解决方法：清除浮动（清除浮动带来的影响）
? ? 1.额外标签法：在父级元素内容的最后添加一个块级元素，设置css属性clear:both（清除两侧浮动的影响）
? ? 注意：得加一个空标签并设置css属性
? ? 2.单伪元素法：直接在div加clearfix类
? ? .clearfix::after{
? ? ? ? content:'';
? ? ? ? display:block;
? ? ? ? clear:both;
? ? }
? ? 注意：同一个div用两个类，只需用空格隔开
? ? 如<div class='box1 box2'></div>
? ? 3.双伪元素(推荐):直接在div加clearfix类
? ? .clearfix::before,
? ? .clearfix:after{
? ? ? ? content:'';
? ? ? ? display:table;(一个大格子,里面有行,行里面是一个一个的单元格)
? ? }
? ? .clearfix::after{
? ? ? ? clear:both;
? ? }
? ? before是用来解决外边距塌陷问题的,after是解决浮动问题
? ? 4.overflow:父元素添加css属性overflow:hidden
? ? 原理:有问题的原因是父级无法被子级撑开高度范围,overflow:hidden会检查父级的范围,这样高度就检查到了
? ? -->
? ? <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>