About CSS floating and canceling floating
Definition of FloatSets the element out of the normal document flow, moving the element closer to the left or right. The edge of the parent element, or the edge of other elements set to float Problems Floating Solve 1. Solve the problem of text surrounding pictures Place the text to the left of the imageWhen not using float:
When using float:
Used attributes Attribute used: float, attribute value: right/left Floating height collapse problem and solution Height collapse problem When the height set for the parent element is different from the height set for the child element, a height collapse problem will occur. When inserting some text, it cannot be inserted in the correct position and the height collapse causes the title to not appear below this block:
After solving:
Workaround Pseudo-element clear float:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.parent{
width: 400px;
height: 400px;
margin: 0 auto;
display: block;
background: lightgray;
}
.parent:after{
content: "";
display: block;
clear: both;
}
.child{
display: inline-block;
width: 200px;
height: 200px;
background: lightblue;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<h1>This is a heading</h1>
<div></div>
</body>
</html>This is the end of this article about CSS floating and canceling floating effects. For more relevant CSS floating and canceling floating content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: Implementation of HTML to PDF screenshot saving function
>>: One minute to experience the smoothness of html+vue+element-ui
Recommend
JavaScript Reflection Learning Tips
Table of contents 1. Introduction 2. Interface 3....
Install Apple Mac OS X in VMWare12 Graphic Tutorial
1. Introduction: Because my friend wanted to lear...
Summary of Vue component basics
Component Basics 1 Component Reuse Components are...
Solve the problem that MySQL read-write separation causes data not to be selected after insert
MySQL sets up independent writing separation. If ...
Detailed explanation of the use of Echart charts in the front-end and back-end of the project
Table of contents Preface 1. Project Architecture...
A tutorial on how to install, use, and automatically compile TypeScript
1. Introduction to TypeScript The previous articl...
Detailed explanation of the points that need to be paid attention to in HTML standards that comply with W3C standards
XML/HTML CodeCopy content to clipboard <!DOCTY...
How to use MySQL's geometry type to handle longitude and latitude distance problems
Create a table CREATE TABLE `map` ( `id` int(11) ...
MySQL 5.7.19 installation tutorial under Windows 10 How to change the root password of MySQL after forgetting it
Take MySQL 5.7.19 installation as an example, fir...
Detailed explanation of achieving high availability of eureka through docker and docker-compose
Recently, new projects have used springcloud and ...
Download MySQL 5.7 and detailed installation diagram for MySql on Mac
1. Enter the following address in the browser htt...
Detailed explanation of the use and underlying principles of MySQL table partitions
Table of contents What is a partition table Parti...
CSS method of controlling element height from bottom to top and from top to bottom
Let’s start the discussion from a common question...
HTML table markup tutorial (4): border color attribute BORDERCOLOR
To beautify the table, you can set different bord...
Detailed instructions for installing Jenkins on Ubuntu 16.04
1. Prerequisites JDK has been installed echo $PAT...