You can find all the code in this post at the repo Github.
You can check the visual here:
Clear floating
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Clear Float</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<p>This paragraph will wrap around the floated boxes.</p>
<div class="container clearfix">
<div class="box">Box A</div>
<div class="box">Box B</div>
</div>
<p>This paragraph will not wrap around the boxes because of clearfix.</p>
</body>
</html>
.box {
float: left;
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgreen;
}
.container {
border: 2px solid black;
padding: 10px;
}
.clearfix::after {
content: " ";
display: block;
height: 0; /* optional */
visibility: hidden; /* optional */
clear: both;
}
Overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Overflow</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p class="one-line-overflow">The content is going to overflow!</p>
<p class="multiple-lines-overflow">The content is going to overflow!</p>
</body>
</html>
.one-line-overflow {
width: 40px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.multiple-lines-overflow {
width: 40px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Top comments (0)