【前段基础入门之】=＞CSS浮动

【前段基础入门之】=＞CSS浮动-LMLPHP

浮动的简介

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

元素浮动后的特点

🤢 脱离文档流。
😊 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），且宽高可设
😊 即使是块级元素也不会独占一行，可以与其他元素共用一行
😊 不会发生 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding
😊 不会像行内块一样可以被当做文本处理（没有行内块的空白问题）

元素浮动后会有哪些影响

对兄弟元素的影响：

对父元素的影响：

解决浮动产生的影响（清除浮动）

方案一：给父元素指定高度,（只能解决父元素高度塌陷）。
方案二：给父元素也设置浮动，（只能解决父元素高度塌陷）。
方案三：给父元素设置 overflow:hidden，（只能解决父元素高度塌陷）。
方案四：在所有浮动元素的最后面，添加一个 块级 元素，并给该块级元素设置 clear:both 。
方案五：给浮动元素的父元素，设置一个伪元素，通过伪元素清除浮动，原理与方案四相同。===>( 推荐使用)

.parent::after {
	content: "";
	display: block;
	clear:both;
}

总结浮动属性

浮动布局小练习
【前段基础入门之】=＞CSS浮动-LMLPHP

附代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>

  <div class="box">
    <header>
      <div>logo</div>
      <div>banner1</div>
      <div>banner2</div>
    </header>
    <div class="menu">菜单</div>
    <article>
      <aside class="left">
        <div>
          <div>栏目一</div>
          <div>栏目二</div>
        </div>
        <div>
          <div>栏目三</div>
          <div>栏目四</div>
          <div>栏目五</div>
          <div>栏目六</div>
        </div>
      </aside>
      <aside class="right">
        <div>栏目七</div>
        <div>栏目八</div>
        <div>栏目九</div>
      </aside>

    </article>
    <footer>页脚</footer>
  </div>

</body>

</html>

.box {
    width: 960px;
    margin: 0 auto;
}

.box>header {
    height: 80px;
    text-align: center;
    line-height: 80px;
}

.box>header>div:first-child {
    width: 200px;
    height: 100%;
    float: left;
    background-color: #ddd;
}

.box>header>div:nth-child(2) {
    width: 540px;
    height: 100%;
    float: left;
    margin: 0 0 0 10px;
    background-color: #ddd;
}

.box>header>div:nth-child(3) {
    width: 200px;
    height: 100%;
    float: right;
    background-color: #ddd;
}

.box>.menu {
    height: 30px;
    background-color: #ddd;
    text-align: center;
    line-height: 30px;
    margin: 10px 0;
}

article {
    height: 410px;
}

article>.left {
    width: 750px;
    float: left;
}

article>.left>:first-child {
    height: 198px;
    text-align: center;
    line-height: 200px;
}

article>.left>:first-child>div {
    height: 198px;
    border: 1px solid;
    width: 368px;
}

article>.left>:first-child>div:first-child {
    float: left;
    margin-right: 10px;
}

article>.left>:first-child>div:last-child {
    float: right;
}

article>.left>:last-child {
    width: 750px;
    float: left;
    text-align: center;
    line-height: 198px;
    margin-top: 10px;
}

article>.left>:last-child>div {
    border: 1px solid;
    float: left;
    height: 198px;
    width: 178px;
    margin-right: 10px;
}

article>.left>:last-child>div:last-child {
    margin: 0;
}

article>.right {
    width: 200px;
    float: right;
    text-align: center;
}

article>.right>div {
    border: 1px solid;
    height: 128px;
    line-height: 128px;
}

article>.right>div {
    margin: 0 0 10px 0;
}

footer {
    height: 60px;
    background-color: #ddd;
    text-align: center;
    line-height: 60px;
    margin-top: 10px;
}

旧梦星轨

【前段基础入门之】=＞CSS浮动