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

news2025/1/16 1:52:56

在这里插入图片描述

浮动的简介

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

元素浮动后的特点

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

元素浮动后会有哪些影响

对兄弟元素的影响：

后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟元素无影响

对父元素的影响：

如果父元素未设置宽高，则不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素

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

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

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

在这里插入图片描述

总结浮动属性

CSS 属性	描述	属性值
`float`	设置浮动	`left :` 设置左浮动 `right:` 设置右浮动 `none:` 不浮动，默认值
`clear`	清除浮动清除前面兄弟元素浮动元素的响应	`left :` 清除前面左浮动的影响 `right:` 清除前面右浮动的影响 `both:` 清除前面左右浮动的影响

浮动布局小练习
在这里插入图片描述

附代码：

<!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;
}

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1057766.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！