An analysis of div+float, a very important concept in website design
|
In website construction, you will always encounter various problems with HTML and CSS. Open the homepage of the website https://www.jb51.net and view the source code. The screen is full of HTML tags, with no less than dozens of divs. There are two types of elements in HTML: inline elements (inline elements) and block elements. How do you understand them? Inline elements are elements that do not wrap and can adapt in size. For example, a img font span. When we build a website, the text content inside is an inline element. Block elements are elements that will wrap to the next line regardless of the content, width or height, such as div p li, which are generally used in website layout. The switching between inline elements and block elements uses the two CSS properties display: inline block. For inline elements that contain block elements, use display:inline-block; inline is only used when it contains inline elements. Inline elements can contain inline elements, but try not to contain block elements. Inline elements and block elements can be nested inside block elements. Floating on a website means drifting to the border of the parent element, or the border of the previous floating element. Floating is very useful when using ul li to make a menu, and it can also be used when using div to make a menu. float:right ; Float rigth can make the floating box abandon its original position. The following floats will follow closely and float to the right edge of the parent element border to stop. It is best if we use floats to make website menus. It is best for a group of menus to all float or not float at all. If there is one menu in the middle that does not float, a strange display effect will appear. If the space is not large enough, it can adapt downwards. Leave the parent element until it is filled. float:left ; float left and right are actually the same, except that one floats to the left and the other floats to the right. They will float to the parent border or the previous floating block. If in your website, one of the divs in a pair has a height greater than the other divs, the second floating div will be stuck behind it until there is enough space. For inline elements, if they float, the style will be set to block elements and the width and height can be set. Otherwise, these two attributes are invalid. However, although it is a block element, it will give up the position on the right side of the line and can display other content. For example, the text package image in many website layouts is based on this principle /// Clear float. That is to clear the floating effect. The key to floating is to make room and follow the previous floating quickly. |
<<: Implementation of CSS heart-shaped loading animation source code
>>: Detailed explanation of several examples of insert and batch statements in MySQL
Recommend
Linux implements the source code of the number guessing game
A simple Linux guessing game source code Game rul...
Json advantages and disadvantages and usage introduction
Table of contents 1. What is JSON 1.1 Array liter...
A brief talk about Mysql index and redis jump table
summary During the interview, when discussing abo...
Basic implementation method of cross-component binding using v-model in Vue
Hello everyone, today we will talk about how to u...
Common attacks on web front-ends and ways to prevent them
The security issues encountered in website front-...
Explanation of CAST and CONVERT functions for type conversion in MySQL database
MySQL's CAST() and CONVERT() functions can be...
Sample code for implementing 3D rotation effect using pure CSS
Mainly use the preserve-3d and perspective proper...
Pure CSS to hide the scroll bar but still have the scrolling effect (mobile and PC)
Mobile Mobile pages only need to be compatible wi...
Detailed explanation of the use of MySQL DML statements
Preface: In the previous article, we mainly intro...
How to use @media in mobile adaptive styles
General mobile phone style: @media all and (orien...
Sequence implementation method based on MySQL
The team replaced the new frame. All new business...
Solution to Workbench not connecting to MySQL on Alibaba Cloud Server Ubuntu (tested)
In the past two days, I have been very troubled t...
How to allow remote connection in MySql
How to allow remote connection in MySql To achiev...
VMware virtual machine to establish HTTP service steps analysis
1. Use xshell to connect to the virtual machine, ...
Detailed explanation of the wonderful CSS attribute MASK
This article will introduce a very interesting at...