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
Solve the error during connect exception in Docker
When you first start using Docker, you will inevi...
The whole process of Vue page first load optimization
Table of contents Preface 1. Image Optimization 2...
Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS
7 ways to implement a two-column layout with fixe...
Problem of retrieving root password in MYSQL 5.7 under Linux (tested and available)
Table of contents 1. Retrieve via --skip-grant-ta...
Solve the problem of shrinking Mysql transaction log and log files being too large to shrink
1. MS SQL SERVER 2005 --1. Clear the log exec(...
How to make a div height adaptive to the browser height
This old question has troubled countless front-end...
linux No space left on device 500 error caused by inode fullness
What is an inode? To understand inode, we must st...
A comparison between the href attribute and onclick event of the a tag
First of all, let's talk about the execution ...
Vue implements zoom in, zoom out and drag function
This article example shares the specific code of ...
Detailed explanation of common Docker commands
1. Help Command 1. View the current Docker versio...
Mysql implementation of full-text search and keyword scoring method example
1. Introduction Today a colleague asked me how to...
Linux general java program startup script code example
Although the frequency of starting the shell is v...
Summary of methods for querying MySQL user permissions
Introduce two methods to view MySQL user permissi...
Vue integrates a rich text editor that supports image zooming and dragging
need: According to business requirements, it is n...
MySQL sorting using index scan
Table of contents Install sakila Index Scan Sort ...