7 Replies - 294 Views - Last Post: 10 January 2018 - 06:34 AM

#1 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 31-December 17

what is meaning for the whole paragraph of .row::after? Thanks

Posted 02 January 2018 - 01:05 AM

//What is the explanation for the whole paragraph of .row::after  
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-6">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>

<div class="col-3 right">
  <div class="aside">
    <h2>What?</h2>
    <p>Chania is a city on the island of Crete.</p>
    <h2>Where?</h2>
    <p>Crete is a Greek island in the Mediterranean Sea.</p>
    <h2>How?</h2>
    <p>You can reach Chania airport from all over Europe.</p>
  </div>
</div>

</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

This post has been edited by andrewsw: 02 January 2018 - 02:04 AM
Reason for edit:: added missing [code][/code] tags, learn to do this for yourself


Is This A Good Question/Topic? 0
  • +

Replies To: what is meaning for the whole paragraph of .row::after? Thanks

#2 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: what is meaning for the whole paragraph of .row::after? Thanks

Posted 02 January 2018 - 02:05 AM

What have you found out and what do you think the settings mean? This site requires you to demonstrate some effort.
Was This Post Helpful? 1
  • +
  • -

#3 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 31-December 17

Re: what is meaning for the whole paragraph of .row::after? Thanks

Posted 02 January 2018 - 02:34 AM

As what i know, this paragraph showing, no matter content after the class row, the the element float is not allow to float(W3school). I get this with refer from the information from internet. But, i still not really clear and understand. Therefore, i need to ask the question.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: what is meaning for the whole paragraph of .row::after? Thanks

Posted 02 January 2018 - 04:03 AM

The ::after pseudo element is being used to add some content that can have clear: both. This means that the row will clear any left or right-floated element before it. In this case, it is clearing floated element(s) that the row contains. This trick is used so that no additional (non-semantic) element is added to the DOM simply to solve a formatting issue (float clearance).

The content does not need to be anything "" so long as clear: both can be applied to it.
Was This Post Helpful? 0
  • +
  • -

#5 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 31-December 17

Re: what is meaning for the whole paragraph of .row::after? Thanks

Posted 03 January 2018 - 10:29 AM

Andrewsw, If this coding without this paragraph:
.row::after {
content: "";
clear: both;
display: block;
}

What will happen? I get the result, only the background color changed to #0099cc. Can you explain this?
Thanks
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: what is meaning for the whole paragraph of .row::after? Thanks

Posted 03 January 2018 - 11:47 AM

Your description isn't very clear but, without that rule, the .row element's height disappears because it isn't clearing its floated content. The .footer element then bleeds all the way up to the .row, filling the background colour.

This is a known behaviour that clearing floats is designed to counteract. That is, a block element (such as a div) that only contains floated elements will have zero height. The rule that you've just disabled is one way to fix this behaviour.
Was This Post Helpful? 1
  • +
  • -

#7 nensi.panjwani  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 8
  • Joined: 10-January 18

Re: what is meaning for the whole paragraph of .row::after? Thanks

Posted 10 January 2018 - 05:39 AM

Hi,

You can use .row::after selector using for

Quote

Insert something after the content of each row class.


Thanks.
Was This Post Helpful? 1
  • +
  • -

#8 tedchong  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 31-December 17

Re: what is meaning for the whole paragraph of .row::after? Thanks

Posted 10 January 2018 - 06:34 AM

Thanks, get it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1