浮动元素被推离边缘

Question

预期行为：.header__main .left-col必须以.header__bar .left-col身份运行。它必须紧贴边缘

问题：.left-col在搜索栏和座右铭的第二行中没有按预期工作

＆＃13;

＆＃13;

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  float: left;
}

.right-col {
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如我所见 - height预期header__bar等于40px，但您已获得42px。因此，您的孩子div大于其parent（这是您在此处遇到问题的原因）。

请参阅下面的代码 - 我已通过评论标记了所需更改的位置。

在代码段之后，您可以找到有用文章的链接。

＆＃13;

＆＃13;

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  // left: 0;
  float: left;
}

.right-col {
  // right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  // line-height: 40px;
  vertical-align: middle; // Add this
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description,
.contact__phone {
	line-height: 40px; // Add this
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

＆＃13;

＆＃13;

＆＃13;

<强>文章

• Issues with the width and height of CSS container and child elements
• 6 Methods For Vertical Centering With CSS
• All About Floats

Answer 2

您在.left-col上设置了 left ，由于您没有 position，因此无法应用设置。要解决此问题，您需要同时提供.left-col和.right-col规则 position: absolute ：

＆＃13;

＆＃13;

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  position: absolute;
  left: 0;
  float: left;
}

.right-col {
  position: absolute;
  right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"/>
<div class="header__bar">
  <div class="container">
    <div class="row">
      <div class="left-col">
        <div class="contact">
          <span class="contact__phone">8 (800) 000-00-00</span>
          <span class="contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="blog">
          <a href="#">
            <span class="blog__img"></span>
            <span class="blog__description">Item</span>
          </a>
        </div>

        <div class="youtube">
          <a href="#">
            <span class="youtube__img"></span>
            <span class="youtube__description">Item</span>
          </a>
        </div>

        <div class="live">
          <a href="#">
            <span class="live__img"></span>
            <span class="live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class="header__main">
  <div class="container">
    <div class="row">
      <div class="left-col">

        <span class="motto">Motto</span>

        <div class="search">
          <form class="search__form" action="/" method="get" role="search">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class="right-col">
        <div class="user">
          <a href="#">
            <span class="user__img"></span>
            <span class="user__name">John</span>
          </a>
        </div>

        <div class="cart">
          <a href="#">
            <span class="cart__img"></span>
            <span class="cart__description">Cart: <span id="cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

＆＃13;

＆＃13;

＆＃13;