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
How to use Navicat to operate MySQL
Table of contents Preface: 1. Introduction to Nav...
How to delete folders, files, and decompress commands on Linux servers
1. Delete folders Example: rm -rf /usr/java The /...
The basic use of html includes links, style sheets, span and div, etc.
1. Links Hypertext links are very important in HTM...
33 ice and snow fonts recommended for download (personal and commercial)
01 Winter Flakes (Individual only) 02 Snowtop Cap...
JavaScript timer to achieve seamless scrolling of pictures
This article shares the specific code of JavaScri...
How to use the vue timeline component
This article example shares the specific implemen...
Define your own ajax function using JavaScript
Since the network requests initiated by native js...
Detailed explanation of JavaScript operation mechanism and a brief discussion on Event Loop
Table of contents 1. Why is JavaScript single-thr...
jQuery implements all selection and reverse selection operation case
This article shares the specific code of jQuery t...
Complete steps to install FFmpeg in CentOS server
Preface The server system environment is: CentOS ...
Vue state management: using Pinia instead of Vuex
Table of contents 1. What is Pinia? 2. Pinia is e...
How to batch generate MySQL non-duplicate mobile phone number table example code
Preface In many MySQL test scenarios, some test d...
Summary of the characteristics of SQL mode in MySQL
Preface The SQL mode affects the SQL syntax that ...
Web page CSS priority is explained in detail for you
Before talking about CSS priority, we need to und...
Ubuntu installs scrcpy to complete mobile phone screen projection and control (another way to use QQ WeChat in Ubuntu)
Scrcpy Installation snap install scrcpy adb servi...