Detailed explanation of CSS float property
|
1. What is floating? Floating, as the name suggests, means floating. Refers to the phenomenon that an element is separated from the document flow and floats above the parent element. 2. How to generate floating? Add the float attribute to the element itself float value:
3.What is the function of floating? Function: In the HTML document flow, it is divided into line elements, block elements and inline block elements. Row elements and inline block elements are arranged horizontally, while block elements are arranged from top to bottom in a flow. When we want to arrange block elements horizontally, we use float. When a float is added to a block-level element, the elements that should be arranged vertically begin to be arranged horizontally, as shown in the following figure:
.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<div class="box"> <div class="box1"> box1 </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> <div class="box4"> box4 </div> <div class="box5"> box5 </div> </div>
4. Problems caused by floating When an element is floated, the element is out of the document flow, which will cause a fatal problem: the parent element height collapses (taking the above example as an example):
.box {border: 1px solid #666; width: 800px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
.on { width: 50px; height: 300px; background: pink; }
<div class="box">
<div class="box1"> box1 </div>
<div class="box2"> box2 </div>
<div class="box3"> box3 </div>
<div class="box4"> box4 </div>
<div class="box5"> box5 </div>
</div>
<div class="on"> </div>When I don't add height to the parent element box, the box height is 0, and the box's sibling elements will squeeze upwards; and the floating element will cover the parent sibling element on:
5. How to solve it (advantages and disadvantages)? (1) Parent div defines height
<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>Principle: Manually defining the height of the parent div solves the problem that the parent div cannot automatically obtain the height. Advantages: simple, less code, easy to master Disadvantages: Only suitable for layouts with fixed heights. You need to give an exact height. If the height is different from the parent div, problems will occur. Recommendation: Not recommended, only recommended for layouts with fixed height (2) Add an empty div tag clear:both at the end;
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*Clear floating code*/
.clearfloat{clear:both;height:0;overflow:hidden;}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>Principle: Add an empty div, use the clear:both method in CSS to clear the float, so that the parent div can automatically get the height Advantages: simple, less code, good browser support, less likely to have strange problems Disadvantages: Many beginners do not understand the principle; if there are many floating layouts on the page, a lot of empty divs will be added, which makes people feel bad Recommendation: Not recommended, but this method was previously used as a method to clear floats (3) Parent div defines pseudo objects: after and zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*Clear floating code*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>Principle: IE8 and above and non-IE browsers support :after. The principle is similar to method 2. Zoom (IE exclusive property) can solve the floating problem of IE6 and IE7. Advantages: good browser support, not prone to strange problems (currently: used by large websites, such as Tencent, NetEase, Sina, etc.) Disadvantages: There are too many codes, and many beginners do not understand the principles. Two codes must be used in combination to make mainstream browsers support it. Recommendation: It is recommended to define common classes to reduce CSS code. (4) The parent div defines overflow:hidden
<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>Principle: You must define width or zoom:1, and you cannot define height. When using overflow:hidden, the browser will automatically check the height of the floating area. Advantages: simple, less code, good browser support Disadvantages: Cannot be used with position, because the size exceeding the limit will be hidden. Recommendation: This is only recommended for those who have not used position or have a deep understanding of overflow:hidden. (5) Parent div defines overflow:auto
<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>Principle: You must define width or zoom:1, and you cannot define height. When using overflow:auto, the browser will automatically check the height of the floating area. Advantages: simple, less code, good browser support Disadvantage: When the internal width and height exceed the parent div, a scroll bar will appear. Recommendation: Not recommended. Use this method only if you need scroll bars to appear or if you want to ensure that your code will not cause scroll bars to appear. (6) The parent div also floats together
<style type="text/css">
/*Solution code*/
.div1{background:#000080;border:1px solid red; width:98%;margin-bottom:10px;float:left}
/*Solution code*/
.div2{background:#800080;border:1px solid red;height:100px;width:98%;clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>Principle: All codes float together and become a whole Advantages: No advantages Disadvantages: New floating problems will arise. Recommendation: Not recommended, just for understanding. (7) Parent div defines display:table
<style type="text/css">
;/*Solution code*/
.div1{background:#000080;border:1px solid redwidth:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>Principle: Convert div attributes into a table Advantages: No advantages Disadvantage: New unknown problems will arise. Recommendation: Not recommended, just for understanding. (8) Add br tag clear:both at the end
style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>Principle: The parent div defines zoom:1 to solve the IE floating problem, and adds a br tag clear:both at the end Summarize This is the end of this article on the detailed explanation of the CSS float property. For more relevant CSS float content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: HTML exceeds the text line interception implementation principle and code
>>: How to get the intersection/difference/union of two sets in mysql
Recommend
Introduction to major browsers and their kernels
Trident core: IE, MaxThon, TT, The World, 360, So...
How to display TIF format images in browser
The browser displays TIF format images Copy code T...
Detailed steps for Navicat to remotely connect to SQL Server and convert to MySQL
Preface Recently, I encountered a program using S...
Detailed steps for installing ros2 in docker
Table of contents Main topic 1. Install Docker on...
HTML blockquote tag usage and beautification
Blockquote Definition and Usage The <blockquot...
Detailed explanation of nmcli usage in CentOS8
Common nmcli commands based on RHEL8/CentOS8 # Vi...
Introduction to Royal Blue Color Matching for Web Design
Classical color combinations convey power and auth...
A brief analysis of how to use border and display attributes in CSS
Introduction to border properties border property...
How to implement vertical text alignment with CSS (Summary)
The default arrangement of text in HTML is horizo...
Detailed explanation of putting common nginx commands into shell scripts
1. Create a folder to store nginx shell scripts /...
How to import Excel files into MySQL database
This article shares with you how to import Excel ...
Solve the problem of installing Theano on Ubuntu 19
Solution: Directly in the directory where you dow...
Web design dimensions and rules for advertising design on web pages
1. Under 800*600, if the width of the web page is...
Several ways to improve the readability of web pages
1. Use contrasting colours. The contrast here ref...
HTML form tag tutorial (2):
This tutorial introduces the application of vario...