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

在这里插入图片描述
【前段基础入门之】=>CSS浮动_第1张图片

浮动的简介

  • 在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。
    【前段基础入门之】=>CSS浮动_第2张图片

元素浮动后的特点

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

元素浮动后会有哪些影响

  • 对兄弟元素的影响

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

  • 对父元素的影响

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


解决浮动产生的影响(清除浮动

  1. 方案一: 给父元素指定高度,(只能解决父元素高度塌陷)。
  2. 方案二: 给父元素也设置浮动,(只能解决父元素高度塌陷)。
  3. 方案三: 给父元素设置 overflow:hidden,(只能解决父元素高度塌陷) 。
  4. 方案四: 在所有浮动元素的最后面,添加一个 块级 元素,并给该块级元素设置 clear:both
  5. 方案五: 给浮动元素的父元素,设置一个伪元素,通过伪元素清除浮动,原理与方案四相同。===>( 推荐使用)
.parent::after {
	content: "";
	display: block;
	clear:both;
}

在这里插入图片描述


总结浮动属性

CSS 属性 描述 属性值
float 设置浮动 left : 设置左浮动

right: 设置右浮动

none: 不浮动,默认值

clear 清除浮动
清除前面兄弟元素浮动元素的响应
left : 清除前面左浮动的影响

right: 清除前面右浮动的影响

both: 清除前面左右浮动的影响

浮动布局小练习
【前段基础入门之】=>CSS浮动_第3张图片

附代码:

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

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

<body>

  <div class="box">
    <header>
      <div>logodiv>
      <div>banner1div>
      <div>banner2div>
    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,css,前端,html5)